<pre class='metadata'>
Title: CSS Fill and Stroke Module Level 3
Shortname: fill-stroke
Level: 3
Status: ED
Prepare for TR: no
Work Status: Exploring
Group: fxtf
TR: https://www.w3.org/TR/fill-stroke-3/
ED: https://drafts.fxtf.org/fill-stroke/
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Tab Atkins-Bittner, Google, http://xanthir.com, w3cid 42199
Former editor: Cameron McCormack, Mozilla Corporation, cam@mcc.id.au, w3cid 39882
Abstract: This module contains the features of CSS relating to filling and stroking text and SVG shapes.
Ignored Terms: svg shape, svg shapes, invalid, repeatable list, simple list, valid image, user agent style sheet
Ignored Vars: start, end
Inline Github Issues: title
</pre>

<pre class=link-defaults>
spec:css-values-4; type:type; text:<position>
spec:css-color-4; type:property; text:color
spec:css-break-3; type:dfn; text:fragment
spec:svg2; type:dfn;
	text:equivalent path
	text:paint server element
</pre>

Introduction {#intro}
=====================

	Text and SVG graphical elements that define a shape--
	<{path}> elements, basic shapes such as <{rect}>--
	are rendered by being <dfn noexport>filled</dfn>,
	which is painting the interior of the object,
	and <dfn noexport>stroked</dfn>,
	which is painting along the outline of the object.

	This specification describes how text and SVG graphical elements are filled and stroked,
	by defining a number of properties that control the appearance and shape
	of an element's fill and stroke.

Issue: Insert <a href="https://svgwg.org/svg2-draft/painting.html#SpecifyingPaint">Specifying Paint from SVG2</a>.

Issue: Deal with text decoration. See <a href="https://www.w3.org/mid/20160422204811.GA17804@pescadero.dbaron.org">issue</a> and <a href="https://www.w3.org/mid/1400592192.22096.52.camel@localhost.localdomain">other issue</a>.

<!--
████████     ███    ████ ██    ██ ████████
██     ██   ██ ██    ██  ███   ██    ██
██     ██  ██   ██   ██  ████  ██    ██
████████  ██     ██  ██  ██ ██ ██    ██
██        █████████  ██  ██  ████    ██
██        ██     ██  ██  ██   ███    ██
██        ██     ██ ████ ██    ██    ██
-->

Paint {#paint}
==============

	Paint is what makes abstract geometries visible.
	It consists of colors, patterns, images, gradients, and other 2D graphics.
	The <<color>> type represents 0-dimensional paint;
	it is defined in [[!CSS3-COLOR]].
	The <<paint>> type represents 2-dimensional paint,
	and its syntax is:

	<pre class=prod>
		<dfn>&lt;paint></dfn> = none | <<image>> | <<svg-paint>>
	</pre>

	<dl dfn-for="<paint>" dfn-type=value>
		: <dfn>none</dfn>
		:: Indicates no paint is applied.

		: <<image>>
		:: Defined in [[!CSS3-IMAGES]]
			and includes image references and gradients.

		: <<svg-paint>>
		:: References SVG paint servers,
			and is defined in [[#svg-paint]].
			A <<url>> value here is treated as an [=ambiguous image URL=].
	</dl>

SVG-Specific Paints {#svg-paint}
--------------------------------

	<pre class=prod>
		<dfn>&lt;svg-paint></dfn> = child | child( <<integer>> )
	</pre>

	<dl dfn-type=value dfn-for="<svg-paint>">
		: <dfn>child</dfn>
		::
			Refers to the last child [=paint server element=]
			of the element being painted.

			If there is no such child,
			behaves as ''&lt;paint>/none''.

		: <dfn>child(<<integer>>)</dfn>
		::
			This [=functional notation=],
			which accepts a positive integer as its argument,
			refers to the nth child [=paint server element=]
			(1-indexed, as for ''::nth-child()'')
			of the element being painted.

			If there is no such child,
			behaves as ''&lt;paint>/none''.

			Arguments less than 1 are invalid.
	</dl>

	Issue(w3c/csswg-drafts#383):

	Issue: <css>context-fill</css> and <css>context-stroke</css> need to be worked into the spec,
	but they belong as keywords on each individual 'stroke' and 'fill' sub-property,
	not as a <<paint>> value.
	Needs more WG discussion,
	and confirmation that this is an SVG2 feature that will be kept,
	before we do the relatively substantial edits for it.

	Issue: [[css-images-4#paint-sources]] defines how to handle SVG paint server coordinate spaces.
	Copy, ref, or something else here?


<!--
████████ ████ ██       ██
██        ██  ██       ██
██        ██  ██       ██
██████    ██  ██       ██
██        ██  ██       ██
██        ██  ██       ██
██       ████ ████████ ████████
-->

Fills {#fills}
==============

	A <dfn>fill</dfn> paints within
	the outlines of an SVG shape or the glyphs of an inline (or SVG text) box.
	Similar to backgrounds [[CSS3BG]], <a>fills</a> can be a solid color ('fill-color') and/or an image pattern ('fill-image' etc.).

	Advisement: It is strongly recommended to use the 'fill' shorthand when setting <a>fills</a>.
	The individual <a section href="#fill-paint">painting longhands</a> should only be used when it's needed to alter one individual aspect.

	Issue: Add a <css>box-break</css> property that is a shorthand for 'box-decoration-break', 'fill-break', and 'stroke-break'?

Layering Multiple Fills {#fill-layering}
----------------------------------------

	The fill of a box can have multiple layers.
	The number of layers is determined by the number of comma-separated values for the 'fill-image' property.
	A value of ''fill-image/none'' still creates a layer.

	List-valued properties interact exactly as for background images,
	defined in [[css-backgrounds-3#layering]].

Fill Geometry {#fill-geometry}
------------------------------

### Winding Rule for SVG shapes: the 'fill-rule' property ### {#fill-rule}

	<pre class=propdef>
		Name: fill-rule
		Value: nonzero | evenodd
		Initial: nonzero
		Applies to: SVG shapes
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed Value: as specified
		Animation type: discrete
	</pre>

	The 'fill-rule' property indicates the rule
	used to determine what parts of the canvas are included inside the shape.
	For a simple, non-intersecting path,
	it is intuitively clear what region lies “inside”;
	however, for a more complex path,
	such as a path that intersects itself
	or where one subpath encloses another,
	the interpretation of “inside” is not so obvious.

	The 'fill-rule' property provides two options for how the inside of a shape is determined:

	<dl dfn-type=value dfn-for=fill-rule>
		<dt><dfn>nonzero</dfn>
		<dd>
			This rule determines the “insideness” of a point on the canvas
			by drawing a ray from that point to infinity in any direction
			and then examining the places where a segment of the shape crosses the ray.
			Starting with a count of zero,
			add one each time a path segment crosses the ray from left to right
			and subtract one each time a path segment crosses the ray from right to left.
			After counting the crossings,
			if the result is zero then the point is outside the path.
			Otherwise, it is inside.

			<figure>
				<img src="images/fillrule-nonzero.svg">
				<figcaption>
					The effect of a nonzero fill rule on paths with self-intersections and enclosed subpaths.
				</figcaption>
			</figure>

		<dt><dfn>evenodd</dfn>
		<dd>
			This rule determines the “insideness” of a point on the canvas
			by drawing a ray from that point to infinity in any direction
			and counting the number of path segments from the given shape that the ray crosses.
			If this number is odd,
			the point is inside;
			if even,
			the point is outside.

			<figure>
				<img src="images/fillrule-evenodd.svg">
				<figcaption>
					The effect of an evenodd fill rule on paths with self-intersections and enclosed subpaths.
				</figcaption>
			</figure>
	</dl>

	Note: The above descriptions do not specify what to do
	if a path segment coincides with or is tangent to the ray.
	Since any ray will do,
	one may simply choose a different ray that does not have such problem intersections.

	This property does not apply to text
	(whether SVG or CSS),
	as the “inside” of a text glyph is intrinsically defined.

	Issue: Should this be layerized?

### Fragmented Fills: the 'fill-break' property ### {#fill-break}

	<pre class="propdef">
		Name: fill-break
		Value: bounding-box | slice | clone
		Initial: bounding-box
		Applies to: all elements
		Inherited: yes?
		Percentages: N/A
		Media: visual
		Computed value: as specified
		Animation type: discrete
	</pre>

	This property specifies how the geometry of a <a>fragmented</a> box is treated for <a>fills</a>.

	Values have the following meanings: COPY FROM FRAGMENTATION

Fill Paint {#fill-paint}
------------------------

### Fill Color: the 'fill-color' property ### {#fill-color}

	<pre class="propdef">
		Name: fill-color
		Value: <<color>>
		Initial: currentcolor
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed value: the computed color
		Animation type: by computed value
	</pre>

	This property sets the fill color of an element.
	This color is drawn behind any fill images.

	Advisement: It's recommended that authors use the 'color' property to set the color of text,
	rather than 'fill-color'.

	Unlike 'background-color',
	the fill color must only be drawn if the final layer of 'fill-image'
	is ''fill-image/none'' or an <a>invalid image</a>.
	If it's a <a>valid image</a>,
	the fill color must not be drawn.

	Note: This is required to match the legacy behavior of SVG's 'fill' property,
	which built in a "fallback color" to the single-layer image syntax.
	In CSS this is better achieved with the ''image()'' function,
	which makes fallback explicit.

	Issue: 'fill-color' should be layerized, like 'stroke-color',
	so the two sets of properties are maximally consistent.

	SVG user agents must include the following rules
	(or their equivalent)
	in their [=user agent style sheet=]:

	<pre class=lang-css>
		@namespace svg "http://www.w3.org/2000/svg";
		svg:svg:root, *|*:not(svg|*) > svg:svg {
			fill-color: black;
		}
	</pre>

### Fill Image Sources: the 'fill-image' property ### {#fill-image}

	<pre class="propdef">
		Name: fill-image
		Value: <<paint>>#
		Initial: none
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed value: as specified, with any <<image>> computed
		Animation type: repeatable list
	</pre>

	This property sets the fill images of an element.
	Images are drawn with the first specified one on top (closest to the user)
	and each subsequent image behind the previous one.
	Values are interpreted identically to 'background-image',
	mutatis mutandi.

### Fill Positioning Area: the 'fill-origin' property ### {#fill-origin}

	<pre class="propdef">
		Name: fill-origin
		Value: match-parent | fill-box | stroke-box | content-box | padding-box | border-box
		Initial: match-parent
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Media: visual
		Computed value: as specified
		Animation type: discrete
	</pre>

	This property specifies the coordinate system of the <a>fill</a>,
	setting the <dfn export>fill positioning area</dfn>.
	Values have the following meanings:

	<dl dfn-for="fill-origin" dfn-type="value">
		<dt><dfn>match-parent</dfn>
		<dd>
			Use the same <a>fill positioning area</a> as the parent.
			If it has no parent, use the <a>initial containing block</a>.

		<dt><dfn>content-box</dfn>
		<dt><dfn>padding-box</dfn>
		<dt><dfn>border-box</dfn>
		<dd>
			Use the box’s own content-box/padding-box/border-box as the <a>fill positioning area</a>.
			For <a>SVG shapes</a>,
			''fill-origin/content-box'' and ''fill-origin/padding-box'' are treated as ''fill-origin/fill-box'',
			while ''fill-origin/border-box'' is treated as ''fill-origin/stroke-box''.

		<dt><dfn>fill-box</dfn>
		<dd>
			For <a>SVG shapes</a> or SVG text,
			use the <a>object bounding box</a> of the element.
			For CSS boxes,
			use the bounding box of the text glyph outlines
			of the element and all in-flow or floated descendants.

		<dt><dfn>stroke-box</dfn>
		<dd>
			For <a>SVG shapes</a> or SVG text,
			use the <a>stroke bounding box</a> of the element.
			For CSS boxes,
			use the bounding box of the text glyph stroke outlines
			of the element and all in-flow or floated descendants.
	</dl>

	The SVG UA style sheet is amended to include the following rules:

	<pre class="lang-css">
	svg:svg {
		fill-origin: content-box;
	}
	</pre>

	The <dfn export>fill painting area</dfn> is infinite in size.
	When painting,
	the fill color/images are intersected with the glyph areas of the affected text,
	or the fill geometry of the affected <a>SVG shape</a>.

	Issue: SVG paint servers carry around their own originator information in *Units attributes,
	but maybe SVGWG can add a new value that makes them pay attention to the CSS originator.
	Alternately, we can add an <css>auto</css> initial value here,
	which defers to the paint server's information
	if you're referring to one,
	and otherwise is ''fill-origin/match-parent''.

### Positioning Fill Images: the 'fill-position' property ### {#fill-position}

	<pre class='propdef'>
		Name: fill-position
		Value: <<position>>#
		Initial: 0% 0%
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: n/a
		Media: visual
		Computed value: A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
		Animation type: repeatable list
	</pre>

	If fill images have been specified,
	this property specifies their initial position
	(after any resizing)
	within their corresponding <a>fill positioning area</a>.
	Values are interpreted identically to 'background-position',
	mutatis mutandi.

### Sizing Fill Images: the 'fill-size' property ### {#fill-size}

	<pre class='propdef'>
		Name: fill-size
		Value: <<bg-size>>#
		Initial: auto
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: n/a
		Media: visual
		Computed value: as specified, but with lengths made absolute and omitted ''background-size/auto'' keywords filled in
		Animation type: repeatable list
	</pre>

	Specifies the size of the fill images.
	Values are interpreted identically to 'background-size',
	mutatis mutandi.

### Tiling Fill Images: the 'fill-repeat' property ### {#fill-repeat}

	<pre class='propdef'>
		Name: fill-repeat
		Value: <<repeat-style>>#
		Initial: repeat
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: n/a
		Media: visual
		Computed value: A list, each item consisting of: two keywords, one per dimension
		Animation type: discrete
	</pre>

	Specifies how fill images are tiled after they have been sized and positioned.
	Values are interpreted identically to 'background-repeat',
	mutatis mutandi.

### Fill Shorthand: the 'fill' property ### {#fill-shorthand}

	<pre class="propdef">
		Name: fill
		Value: <<'background'>> with modifications
		Initial: See individual properties
		Applies to: See individual properties
		Inherited: See individual properties
		Percentages: N/A
		Media: visual
		Computed value: See individual properties
		Animation type: See individual properties
	</pre>

	This property is a <a>shorthand</a> that sets all of the fill painting properties--
	'fill-color',
	'fill-image',
	'fill-origin',
	'fill-position',
	'fill-size',
	and 'fill-repeat'--
	in one declaration.
	Omitted values are set to their initial value,
	except that an omitted 'fill-color' is set to ''transparent'',
	and an omitted 'fill-origin' is set to ''fill-origin/fill-box''.

	Issue: What should be the default value for fill-origin when set via this shorthand?
	content-box or fill-box?
	fill-box works better for fancy/overflowing fonts like Zapfino,
	but it's much more expensive to calculate than content-box.

	Issue: SVG has special color fallback syntax--
	a color following an image is only drawn if the image fails.
	This conflicts with our desire to match 'background',
	because ''fill: url(#foo) red;'' does *not* fill with red and then draw #foo.
	Compromise: fill-color is a fallback color,
	but both ''fill-image/none'' and <a>invalid images</a> trigger the fallback.
	So ''fill: url(#foo) red;'' will only draw the red if there is no #foo (like SVG),
	but ''fill: url(#foo), red'' (equivalent to ''none red'' on the last layer)
	will draw the red <em>and</em> the #foo (like 'background').

Fill Transparency {#fill-filter}
--------------------------------

### Fill Opacity: the 'fill-opacity' property ### {#fill-opacity}

	<pre class="propdef">
		Name: fill-opacity
		Value: <<'opacity'>>
		Initial: 1
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed value: the specified value converted to a <<number>>, clamped to the range [0,1]
		Animation type: by computed value
	</pre>

	The 'fill-opacity' property specifies the opacity of the painting operation
	used to fill the element.
	As with 'opacity',
	a value of ''0'' or ''0%'' means fully transparent,
	and a value of ''1'' or ''100%'' means fully opaque.

<!--
 ██████  ████████ ████████   ███████  ██    ██ ████████
██    ██    ██    ██     ██ ██     ██ ██   ██  ██
██          ██    ██     ██ ██     ██ ██  ██   ██
 ██████     ██    ████████  ██     ██ █████    ██████
      ██    ██    ██   ██   ██     ██ ██  ██   ██
██    ██    ██    ██    ██  ██     ██ ██   ██  ██
 ██████     ██    ██     ██  ███████  ██    ██ ████████
-->

Strokes (Outlines) {#strokes}
=============================

	A <dfn>stroke</dfn> draws a border along
	the outlines of an SVG shape or the glyphs of an inline (or SVG text) box.
	The resulting area can be filled similar to the <a>fill</a> area.
	<a>Strokes</a> can be a solid color ('stroke-color') and/or an image pattern ('stroke-image' etc.).

	Advisement: It is strongly recommended to use the 'stroke' shorthand when setting <a>strokes</a>.
	The individual <a section href="#stroke-paint">painting longhands</a> should only be used when it's needed to alter one individual aspect.

	By default, <a>strokes</a> are drawn on top of <a>fills</a>;
	the drawing order is controlled by the 'paint-order' property.

Layering Multiple Strokes {#stroke-layering}
--------------------------------------------

	The stroke of a box can have multiple layers.
	The number of layers is determined by the larger of
	the number of comma-separated values for the 'stroke-image' property
	and the number of comma-separated values for the 'stroke-color' property.
	A value of ''stroke-image/none'' still creates a layer.

	If the two properties have different lengths,
	the values are aligned from the end,
	with missing front values for 'stroke-color' defaulting to ''transparent'',
	and missing front values for 'stroke-image' defaulting to ''stroke-image/none''.

	List-valued properties interact exactly as for background images,
	defined in [[css-backgrounds-3#layering]].

	Issue: 'stroke-color' must front-fill with ''transparent'',
	otherwise multiple image layers will randomly fall back to solid colors
	if the image fails to load.
	Do we want to have strokes and fills front-fill with initial values in general,
	or should the rest of these properties repeat their lists as they do for backgrounds?

Stroke Geometry {#stroke-geometry}
----------------------------------

	Issue: We currently layerize the stroke paint props, and 'stroke-width',
	per SVGWG resolution.
	Should we layerize the other geometry properties?
	They have similar use-cases,
	albeit somewhat more niche,
	and consistency in API is important.
	Worth the implementation/testing effort?
	Hard case: 'stroke-dasharray',
	because it has "commas anywhere lol" syntax.

### Stroke Thickness: the 'stroke-width' property ### {#stroke-width}

	<pre class="propdef">
		Name: stroke-width
		Value: <<length-percentage>>#
		Initial: 1px
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: relative to the <a>scaled viewport size</a>
		Media: visual
		Computed value: the absolute length, or percentage
		Animation type: by computed value
	</pre>

	This property specifies the width of the strokes on the outline.
	A zero value causes no stroke to be painted for that layer.
	Negative values are invalid.

	The <dfn>scaled viewport size</dfn> is the geometric mean of the viewport width and height.

### Stroke Positioning: the 'stroke-align' property ### {#stroke-align}

	<pre class="propdef">
		Name: stroke-align
		Value: center | inset | outset
		Initial: center
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed value: as specified
		Animation type: discrete
	</pre>

	This property allows the author to align a <a>stroke</a> along the outline.

	<dl dfn-type=value dfn-for=stroke-align>
		<dt><dfn>center</dfn>
		<dd>
			The stroke for each subpath
			is centered on the outline.

		<dt><dfn>inset</dfn>
		<dd>
			The stroke for each subpath
			lies on the “inside” of the outline
			(into the fill area).

			The 'stroke-linejoin' property must be ignored.

			Issue: Why is 'stroke-linejoin' ignored?
			It's still needed for interior corners.

		<dt><dfn>outset</dfn>
		<dd>
			The stroke for each subpath
			lies on the “outside” of the outline
			(outside the fill area).
	</dl>

	<div class=issue>
		Text is easy, as are simple closed, non-self-intersecting paths,
		but the other categories exist and need good definitions.

		How does this apply to open path segments?
		One suggestion is to alias ''stroke-align/outset'' to ''stroke-align/left'' and ''stroke-align/inset'' to ''stroke-align/right'' for open paths.
		How are end caps handled?

		<figure>
			<img src="images/stroke-align-open-path.svg">
			<figcaption>
				1. Stroke with 'stroke-align' ''stroke-align/center'' value.
				2. Fill region.
				3. Stroke with 'stroke-align' ''stroke-align/inset'' value per spec (? stroke only paints inside fill region).
				4. Stroke with 'stroke-align' ''stroke-align/outset'' value (implemented by blocking out fill region).
				5. Stroke with 'stroke-align' ''stroke-align/inset'' value, alternative interpretation.
				6. Stroke with 'stroke-align' ''stroke-align/outset'' value per spec (?).
				7. Stroke with 'stroke-align' alternative ''stroke-align/left'' value; pink shows round line-cap.
			</figcaption>
		</figure>

		How does this apply to paths with loops?
		Is the region inside the red circle in the below figure part of the stroked (as shown)?
		Are internal edges stroked if the fill rule is ''nonzero''; if so how?
		(Shown without stroking below.)

		<figure>
			<img src="images/stroke-align-intersecting-path.svg">
			<figcaption>
				* Top row: Normal stroke. Stroke left. Stroke right.
				* Middle row: Fill rule ''nonzero'', no stroke. Stroke outside. Stroke inside.
				* Bottom row: Fill rule ''evenodd'', no stroke. Stroke outside. Stroke inside.
			</figcaption>
		</figure>

		How are dashes handled? Are they based on original path?

		<figure>
			<img src="images/stroke-align-dashes.svg">
			<figcaption>
				1. Normal dash pattern.
				2. Dash pattern based on dash pattern or original path.
					Note light-gray region which is from inside dash part
					(simply using clipping path does not yield proper result).
				3. Dash pattern based on center of offset path.
					Light gray represents dash pattern based on center of inset path.
			</figcaption>
		</figure>
	</div>

### Stroke End Shapes: the 'stroke-linecap' property ### {#stroke-linecap}

	<pre class="propdef">
		Name: stroke-linecap
		Value: butt | round | square
		Initial: butt
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed value: as specified
		Animation type: discrete
	</pre>

	'stroke-linecap' specifies the shape to be used at the end of open subpaths
	(such as the segments of a dashed stroke,
	or an unclosed <{path}> element)
	when they are stroked.
	The possible values are:

	<dl dfn-type=value dfn-for=stroke-linecap>
		<dt><dfn>butt</dfn>
		<dd>
			The stroke for each subpath
			does not extend beyond its two endpoints.
			(A zero length subpath will therefore not have any stroke.)

		<dt><dfn>round</dfn>
		<dd>
			At each end of each subpath,
			the stroke is extended by a half circle
			with a radius equal to half the stroke width.
			(The stroke for a zero-length subpath
			is a full circle centered at the subpath's point.)

		<dt><dfn>square</dfn>
		<dd>
			At the end of each subpath,
			the stroke is extended by a rectangle
			with the same width as the stroke width and whose length is half of the stroke width.
			(The stroke for a zero-length subpath
			is a square with side length equal to the stroke width,
			centered at the subpath's point,
			and oriented such that two of its sides are parallel to the effective tangent at that subpath's point.
			See [[#path-notes]] for details on how to determine the tangent at a zero-length subpath.)

			Issue: Adding a rectangle to the end of dashes on a curved outline looks bad.
			It should just extend the dash by 'stroke-width'/2,
			following the outline.
	</dl>

	<figure>
		<img src="images/linecap.svg">
		<figcaption>
			The three types of line caps.
		</figcaption>
	</figure>

	See the definition of the <a>cap shape</a> below
	for a more precise description of the shape a line cap will have.

### Stroke Corner Shapes: the 'stroke-linejoin' property ### {#stroke-linejoin}

	<pre class="propdef">
		Name: stroke-linejoin
		Value: [ crop | arcs | miter ] || [ bevel | round | fallback ]
		Initial: miter
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed value: as specified
		Animation type: discrete
	</pre>

	'stroke-linejoin' specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
	It has two parts:
	''[ crop | arcs | miter ]'' specifies whether or not, and how, to extend the corner of the stroke;
	''[ bevel | round | fallback ]'' specifies how to render the "cap" of the corner when it's limited in length by 'stroke-miterlimit'.

	<dl dfn-type=value dfn-for=stroke-linejoin>
		<dt><dfn>crop</dfn>
		<dd>
			The stroke extends the minimal amount past the corner
			necessary to form a convex corner.

			This acts identically to ''miter'',
			but forces 'stroke-miterlimit' to behave as if it had its minimum value of ''1''.

		<dt><dfn>miter</dfn>
		<dd>
			A sharp corner is used to join path segments.
			The corner is formed by extending the outer edges of the stroke at the tangents of the path segments
			until they intersect.

		<dt><dfn>arcs</dfn>
		<dd>
			An arcs corner is used to join path segments.
			The arcs shape is formed by extending the outer edges of the stroke at the join point
			with arcs that have the same curvature as the outer edges at the join point.

		<dt><dfn>bevel</dfn>
		<dd>
			The corner is cropped at the 'stroke-miterlimit'
			by the perpendicular to its <a lt="corner diagonal">diagonal</a>.

		<dt><dfn>round</dfn>
		<dd>
			The corner is cropped as for ''bevel'',
			and a filled arc tangent to the truncated stroke edges
			is appended to round the corner.

		<dt><dfn>fallback</dfn>
		<dd>
			When the 'stroke-miterlimit' is exceeded,
			this behaves as if ''crop bevel'' were specified.

			Issue: Can we just remove ''fallback''?
			It's a stupid value,
			useful only because we didn't have the clip-at-miterlimit behavior in SVG1.
			Question is if people are mostly just *accidentally* getting the bevel behavior right now,
			and would be okay with their joins extending up to the miterlimit
			and only getting the excess corners clipped,
			or if they actually wanted the discontinuous behavior currently specified.
			<a href="http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Csvg%3E%0A%20%20%3Cpath%20fill%3Dnone%20stroke%3Dblack%20stroke-width%3D10%20d%3D%22M%2010%2010%20h%20100%20l%20-100%2055%22%20%2F%3E%0A%20%20%3Cpath%20fill%3Dnone%20stroke%3Dblack%20stroke-width%3D10%20d%3D%22M%2010%2050%20h%20100%20l%20-100%2056deg%22%20%2F%3E">
				The breakpoint is between 29 and 30 degrees.
			</a>
	</dl>

	If ''[ crop | arcs | miter ]'' is omitted,
	it defaults to ''crop''.
	If ''[ bevel | round | fallback ]'' is omitted,
	it defaults to ''fallback''.

	<figure>
		<img src="images/linejoin-four.svg">
		<figcaption>
			Four types of line joins
		</figcaption>
	</figure>

	<figure>
		<svg style=" width: 600px; height: 180px;">
			<g transform="translate(0, 0)">
				<path fill=none stroke=black stroke-width=100 d="M 10 50, h 100" />
				<path fill=none stroke=black stroke-width=100 d="M 110 50, l -50 100" />
				<path fill=none stroke=white stroke-dasharray="5 3" stroke-width=1 d="M 10 50, h 100, l -100 200" />
				<path fill="hsla(0, 50%, 70%, 1)" d="M 110 50, v -50, l 44.72 72.36, z" />
			</g>
			<g transform="translate(200,0)">
				<path fill=none stroke=black stroke-width=100 d="M 10 50, h 100" />
				<path fill=none stroke=black stroke-width=100 d="M 110 50, l -50 100" />
				<path fill=none stroke=white stroke-dasharray="5 3" stroke-width=1 d="M 10 50, h 100, l -100 200" />
				<path fill="hsla(0, 50%, 70%, 1)" d="M 110 50, v -50, a 50 50 0 0 1 44.72 72.36, z" />
			</g>
			<g transform="translate(400, 0)">
				<path fill=none stroke=black stroke-width=100 d="M 10 50, h 100" />
				<path fill=none stroke=black stroke-width=100 d="M 110 50, l -50 100" />
				<path fill=none stroke=white stroke-dasharray="5 3" stroke-width=1 d="M 10 50, h 100, l -100 200" />
				<path fill="hsla(0, 50%, 70%, 1)" d="M 110 50, v -50, h 80, L 154.72 72.36, z" />
			</g>
		</svg>
		<figcaption>
			A more detailed look at precisely how each type of join is shaped.
			For each, the dashed white line is the path being stroked,
			and the black is the stroke itself,
			before applying the linejoin.
			The pink area is the additional stroke added at the corner
			for bevel, round, and miter linejoins.
		</figcaption>
	</figure>

### Stroke Corner Limits: the 'stroke-miterlimit' property ### {#stroke-miterlimit}

	<pre class="propdef">
		Name: stroke-miterlimit
		Value: <<number>>
		Initial: 4
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed value: a number
		Animation type: discrete
	</pre>

	This property specifies the maximum size of a ''miter'' or ''arcs'' join
	when two stroke segments meet at a corner.
	(The apparent “size” of the join--
	the distance between the inner and outer corner--
	approaches infinity as the angle decreases.)

	This property has no effect when 'stroke-align' is ''stroke-align/inset''.

	Values have the following meanings:

	<dl dfn-for="stroke-miterlimit" dfn-type=value>
		<dt><dfn><<number>></dfn>
		<dd>
			Specifies the limit on the join's size
			as a ratio of its <dfn for=/ dfn lt="corner diagonal">diagonal</dfn> to the 'stroke-width'.
			Values less than 1 are invalid (and make the declaration <a>invalid</a>).

			For a ''miter'' linejoin,
			the length of the <a lt="corner diagonal">diagonal</a> is calculated
			from the angle between the two segments
			as <code>'stroke-width' / sin(θ/2)</code>.
			The linejoin is clipped perpendicular to
			the line bisecting the angle between the two path segments.

			For an ''arcs'' linejoin,
			the length of the <a lt="corner diagonal">diagonal</a> is calculated
			along a circular arc that is tangent to
			the line bisecting the angle between the two segments
			at the point the two segments intersect
			and passes through the end point of the join.
			The linejoin is clipped perpendicular to this arc.
	</dl>

	Issue: Should we add angles?
	The miterlimit number has physical justification,
	but it's difficult to understand without experimentation.

### Fragmented Strokes: the 'stroke-break' property ### {#stroke-break}

	<pre class="propdef">
		Name: stroke-break
		Value: bounding-box | slice | clone
		Initial: bounding-box
		Applies to: all elements
		Inherited: ?
		Percentages: N/A
		Media: visual
		Computed value: as specified
		Animation type: discrete
	</pre>

	This property specifies how the geometry of a <a>fragmented</a> box is treated for <a>strokes</a>.

	Values have the following meanings: COPY FROM FRAGMENTATION

Stroke Dashing {#stroke-dashes}
-------------------------------

### Stroke Dash Patterns: the 'stroke-dasharray' property ### {#stroke-dasharray}

	<pre class="propdef">
		Name: stroke-dasharray
		Value: none | <<length-percentage>>+#
		Initial: none
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: relative to the <a>scaled viewport size</a>
		Media: visual
		Computed value: as specified
		Animation type: repeatable list
	</pre>

	This property controls the pattern of dashes and gaps used to stroke paths.

	<dl dfn-for="stroke-dasharray" dfn-type="value">
		<dt><dfn>none</dfn>
		<dd>
			No dashing: the stroke is drawn continuously.

		<dt><dfn><<length-percentage>>+#</dfn>
		<dd>
			Specifies a dashing pattern to use.
			Each <<length-percentage>> value represents the length of the next dash or gap
			(beginning with the first dash and alternating from there)
			of the stroke.
			The pattern repeats over the length of the stroke.
			(If the number of values is odd,
			the pattern behaves as if it was duplicated to yield an even number of values.)
			The dashing pattern is reset and begins anew at the start of each subpath.

			Negative values are invalid.
			If all values are zero, it is treated as ''stroke-dasharray/none''.
	</dl>

	Issue: SVG allows comma separation. Do we need to allow this in CSS for back-compat? (Please say no.)

	Issue: Need a way to specify dash lengths relative to the width of the stroke.
	(For instance, to do square dashes.)

	Issue: Need a way to specify dash lengths relative to the length of the path.
	(For instance, to do the "self-drawing SVG" thing without script.)

	<figure>
		<img src="images/dashes.svg">
		<figcaption>
			A dashed stroke.
			The dashing pattern is ''20 10''.
			The red line shows the actual path that is stroked.
		</figcaption>
	</figure>

### Stroke Dash Start Position: the 'stroke-dashoffset' property ### {#stroke-dashoffset}

	<pre class="propdef">
		Name: stroke-dashoffset
		Value: <<length-percentage>>
		Initial: 0
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: relative to the <a>scaled viewport size</a>
		Media: visual
		Computed value: as specified
		Animation type: repeatable list
	</pre>

	This property specifies the distance into the repeated dash pattern to start dashing at the beginning of the path.
	Values can be negative.

	<figure>
		<img src="images/dashoffset.svg">
		<figcaption>
			A dashed stroke with a non-zero dash offset.
			The dashing pattern is ''20 10'' and the dash offset is ''15''.
			The red line shows the actual path that is stroked.
		</figcaption>
	</figure>

	See [[#algo-dash-positions]] for a more precise description of positions along a path that dashes will be placed.

### Corner Control: the 'stroke-dash-corner' and 'stroke-dash-justify' properties ### {#corner-control}

	<pre class=propdef>
	Name: stroke-dash-corner
	Value: none | <<length>>
	Initial: none
	Applies to: text and <a>SVG shapes</a>
	Inherited: yes
	Percentages: N/A
	Media: visual
	Computed Value: specified value, with lengths made absolute
	Animation type: by computed value if <<length>>, otherwise discrete
	</pre>

	The 'stroke-dash-corner' property controls
	whether a dash is always painted at the vertices of a stroked shape.
	The points at which a dash corner is painted include
	the start and end points of every segment within the shape's [=equivalent path=].

	<dl dfn-type=value dfn-for=stroke-dash-corner>
		: <dfn>none</dfn>
		::
			This property has no special effect on dashing:
			the dashes are positioned/sized continuously along the path.

		: <<length>>
		::
			A dash of the given <<length>>
			must be painted at each vertex of the shape.
			For an open shape,
			the first corner dash is positioned so that it begins at the start of the path,
			and the last corner dash so that it ends at the end of the path.
			The other corner dashes of an open shape,
			and all corner dashes of a closed shape,
			are positioned so that they are centered on their vertex.
	</dl>

	Issue: Should the corner dash at the first and last vertex of an open shape
	be half the length of the others?
	Should this be author controllable?

	Issue: Should there be a way to specify a padding,
	so that any dash pattern between the corner dashes
	does not not run up against them?

	Issue: The corner needs to take over the role of the first dash in the dash pattern,
	so the "interior" of each segment starts and ends with a gap.
	Automatically skip the first dash in the pattern in each segment?

	Issue: Keyword to use the length of the first dash as the corner.

	When 'stroke-dash-corner' is not ''stroke-dash-corner/none'',
	dash patterns
	(as specified by ''stroke-dasharray'')
	are repeated separately on each path segment,
	in the space between the segment's corner dashes.

	Issue: Need to define what happens when corner dashes would overlap.

	Issue: Should we auto-trigger justification when this property is active?
	Without it, you'll get some dumb-looking results by default.

	<figure>
		<img src="images/dashcorner.svg" alt="Image showing a rectangle at each corner and short dashes in between.">
		<figcaption>
			A rectangle painted with a dashed stroke and with corner dashes,
			set with ''stroke-dasharray: 0 8px; stroke-dash-corner: 32px;''.
		</figcaption>
	</figure>

	<pre class=propdef>
	Name: stroke-dash-justify
	Value: none | [ stretch | compress ] || [ dashes || gaps ]
	Initial: none
	Applies to: text and <a>SVG shapes</a>
	Inherited: yes
	Percentages: N/A
	Media: visual
	Computed Value: specified value, with lengths made absolute
	Animation type: discrete
	</pre>

	The 'stroke-dash-justify' property specifies
	whether and how a stroke's dash pattern will be adjusted
	so that it is repeated a whole number of times
	along each of an element's subpaths.

	<dl dfn-type=value dfn-for=stroke-dash-justify>
		: <dfn>none</dfn>
		::
			No adjustment of the dash pattern is made:
			it's clipped at the end of the subpath
			with however much progress it made to that point.

		: <dfn>stretch</dfn>
		::
			Indicates that when the dash pattern does not fit into a subpath a whole number times,
			the dashes or gaps (or both) will be lengthened so that it does.

		: <dfn>compress</dfn>
		::
			Indicates that when the dash pattern does not fit into a subpath a whole number times,
			the dashes or gaps (or both) will be shortened so that it does.

		: <dfn>dashes</dfn>
		::
			Indicates that when a dash pattern is to be stretched or compressed,
			the length of the dashes will be adjusted.

		: <dfn>gaps</dfn>
		::
			Indicates that when a dash pattern is to be stretched or compressed,
			the length of the gaps will be adjusted.
	</dl>

	If neither ''stroke-dash-justify/stretch'' nor ''stroke-dash-justify/compress'' is specified,
	it defaults to whichever would result in less adjustment.

	If neither ''stroke-dash-justify/dashes'' nor ''stroke-dash-justify/gaps'' is specified,
	it defaults to ???.

	Issue: Default should probably be to adjust the gaps only.

	The target length that a dash pattern will be adjusted to
	depends on the value of the 'stroke-dash-corner' property:

	* If 'stroke-dash-corner' is ''stroke-dash-corner/none'',
		then the dash pattern will be adjusted
		to fit within the length of the subpath a whole number of times.
	* If 'stroke-dash-corner' has any other value,
		including a zero length,
		then the dash pattern will be adjusted differently for each path segment of the subpath
		such that it fits between the two corner dashes at the ends of the segment
		a whole number of times.

	The adjustment of dash and gap length in a dash pattern is done by scaling the lengths by a factor,
	which is the number closest to 1
	that will result in the dash pattern fitting in the target length
	a whole number of times.
	If ''stroke-dash-justify/stretch'' is used,
	the factor is a number between 1 and 2,
	while if ''stroke-dash-justify/compress'' is used,
	the factor is a number between 0 and 1.

	If ''stroke-dash-justify/stretch'' is specified,
	but the dash pattern is longer than the target length,
	no adjustment is performed.

	Issue: Should it center the segment when it's too long?

	If ''stroke-dash-justify/compress'' is specified,
	but the adjustable parts of the dash pattern
	can't be compressed enough to fit the dash pattern into the target length,
	the compressible parts must be set to zero.

	Issue: Do we want to allow control of whether the stroke ends with a dash or with a gap?
	For a closed path,
	you probably want a gap at the end,
	while for an open path,
	a dash at the end is probably better.
	Maybe omit control for this,
	and just do it automatically based on whether the path is closed?

	<figure>
		<img src="images/dashadjust.svg">
		<figcaption>
			The same dash stroke used on three different paths,
			adjusted to fit a whole number of times on each.
		</figcaption>
	</figure>



Stroke Paint {#stroke-paint}
----------------------------

### Stroke Color: the 'stroke-color' property ### {#stroke-color}

	<pre class="propdef">
		Name: stroke-color
		Value: <<color>>#
		Initial: transparent
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed value: the computed color
		Animation type: by computed value
	</pre>

	This property sets the stroke colors of an element.
	Like 'stroke-image',
	stroke colors are drawn with the first specified one on top
	(closest to the user)
	and each subsequent color behind the previous one.

	Stroke colors are only drawn if the 'stroke-image' on the corresponding layer
	is ''stroke-image/none'' or an <a>invalid image</a>.
	(In other words,
	each layer draws <em>either</em> an image or a color,
	with images winning if both are specified.)

	Note: This is required to match the legacy behavior of SVG's 'stroke' property,
	which built in a "fallback color" to the single-layer image syntax.
	In CSS this is better achieved with the ''image()'' function,
	which makes fallback explicit.

### Stroke Image Sources: the 'stroke-image' property ### {#stroke-image}

	<pre class="propdef">
		Name: stroke-image
		Value: <<paint>>#
		Initial: none
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed value: as specified, with any <<image>> computed
		Animation type: repeatable list
	</pre>

	This property sets the stroke images of an element.
	Images are drawn with the first specified one on top
	(closest to the user)
	and each subsequent image behind the previous one.
	Values are interpreted identically to 'background-image', mutatis mutandi.

### Stroke Positioning Area: the 'stroke-origin' property ### {#stroke-origin}

	<pre class="propdef">
		Name: stroke-origin
		Value: match-parent | fill-box | stroke-box | content-box | padding-box | border-box
		Initial: match-parent
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Media: visual
		Computed value: as specified
		Animation type: discrete
	</pre>

	This property specifies the coordinate system of the <a>stroke</a>,
	setting the <dfn export>stroke positioning area</dfn>.
	Values have the following meanings:

	<dl dfn-for="stroke-origin" dfn-type="value">
		<dt><dfn>match-parent</dfn>
		<dd>
			Use the same <a>stroke positioning area</a> as the parent.
			If it has no parent, use the <a>initial containing block</a>.

		<dt><dfn>content-box</dfn>
		<dt><dfn>padding-box</dfn>
		<dt><dfn>border-box</dfn>
		<dd>
			Use the box’s own content-box/padding-box/border-box as the <a>stroke positioning area</a>.
			For <a>SVG shapes</a>,
			''stroke-origin/content-box'' and ''stroke-origin/padding-box'' are treated as ''stroke-origin/fill-box'',
			while ''stroke-origin/border-box'' is treated as ''stroke-origin/stroke-box''.

		<dt><dfn>fill-box</dfn>
		<dd>
			For <a>SVG shapes</a> or SVG text,
			use the <a>object bounding box</a> of the element.
			For CSS boxes,
			use the bounding box of the text glyph outlines
			of the element and all in-flow or floated descendants.

		<dt><dfn>stroke-box</dfn>
		<dd>
			For <a>SVG shapes</a> or SVG text,
			use the <a>stroke bounding box</a> of the element.
			For CSS boxes,
			use the bounding box of the text glyph stroke outlines
			of the element and all in-flow or floated descendants.
	</dl>

	The SVG UA style sheet is amended to include the following rules:

	<pre class="lang-css">
	svg:svg {
		stroke-origin: content-box;
	}
	</pre>

	The <dfn export>stroke painting area</dfn> is infinite in size.
	When painting,
	the stroke color/images are intersected with the glyph strokes of the affected text,
	or the stroke geometry of the affected <a>SVG shape</a>.

	Issue: SVG paint servers carry around their own originator information in *Units attributes,
	but maybe SVGWG can add a new value that makes them pay attention to the CSS originator.
	Alternately, we can add an <css>auto</css> initial value here,
	which defers to the paint server's information
	if you're referring to one,
	and otherwise is ''stroke-origin/match-parent''.

### Positioning Stroke Images: the 'stroke-position' property ### {#stroke-position}

	<pre class='propdef'>
		Name: stroke-position
		Value: <<position>>#
		Initial: 0% 0%
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: n/a
		Media: visual
		Computed value: A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
		Animation type: repeatable list
	</pre>

	If stroke images have been specified,
	this property specifies their initial position
	(after any resizing)
	within their corresponding <a>stroke positioning area</a>.
	Values are interpreted identically to 'background-position',
	mutatis mutandi.

### Sizing Stroke Images: the 'stroke-size' property ### {#stroke-size}

	<pre class='propdef'>
		Name: stroke-size
		Value: <<bg-size>>#
		Initial: auto
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: n/a
		Media: visual
		Computed value: as specified, but with lengths made absolute and omitted ''background-size/auto'' keywords filled in
		Animation type: repeatable list
	</pre>

	Specifies the size of the stroke images.
	Values are interpreted identically to 'background-size',
	mutatis mutandi.

### Tiling Stroke Images: the 'stroke-repeat' property ### {#stroke-repeat}

	<pre class='propdef'>
		Name: stroke-repeat
		Value: <<repeat-style>>#
		Initial: repeat
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: n/a
		Media: visual
		Computed value: A list, each item consisting of: two keywords, one per dimension
		Animation type: discrete
	</pre>

	Specifies how stroke fill images are tiled after they have been sized and positioned.
	Values are interpreted identically to 'background-repeat',
	mutatis mutandi.

### Stroke Shorthand: the 'stroke' property ### {#stroke-shorthand}

	<pre class="propdef">
		Name: stroke
		Value: <<'background'>> with modifications
		Initial: See individual properties
		Applies to: See individual properties
		Inherited: See individual properties
		Percentages: N/A
		Media: visual
		Computed value: See individual properties
		Animation type: See individual properties
	</pre>

	This property is a <a>shorthand</a> that sets all of the stroke painting properties--
	'stroke-color',
	'stroke-image',
	'stroke-origin',
	'stroke-position',
	'stroke-size',
	and 'stroke-repeat'--
	in one declaration.
	Omitted values are set to their initial value,
	except that an omitted 'stroke-color' is set to ''transparent'',
	and an omitted 'stroke-origin' is set to ''stroke-origin/stroke-box''.

## Stroke Transparency ## {#stroke-filter}

### Stroke Opacity: the 'stroke-opacity' property ### {#stroke-opacity}

	<pre class="propdef">
		Name: stroke-opacity
		Value: <<'opacity'>>
		Initial: 1
		Applies to: text and <a>SVG shapes</a>
		Inherited: yes
		Percentages: N/A
		Media: visual
		Computed value: the specified value converted to a <<number>>, clamped to the range [0,1]
		Animation type: by computed value
	</pre>

	The 'stroke-opacity' property specifies the opacity of the painting operation
	used to stroke the current object.
	As with 'opacity',
	a value of ''0'' or ''0%'' means fully transparent,
	and a value of ''1'' or ''100%'' means fully opaque.

## Computing the Shape of the Stroke ## {#path-notes}

### Stroke Paths ### {#stroke-paths}

	In all cases,
	all stroking properties which are affected by directionality,
	such as those having to do with dash patterns,
	must be rendered such that the stroke operation
	starts at the same point at which the graphics element starts.
	In particular, for <{path}> elements,
	the start of the path is the first point of the initial “moveto” command.

	For stroking properties such as dash patterns
	whose computations are dependent on progress along the outline of the graphics element,
	distance calculations are required to utilize
	the SVG user agent's standard <a href="https://svgwg.org/svg2-draft/paths.html#DistanceAlongAPath">Distance along a path algorithms</a>.

	When stroking is performed using a complex paint server,
	such as a gradient or a <{pattern}>,
	the stroke operation must be identical to the result that would have occurred
	if the geometric shape defined by the geometry of the current graphics element
	and its associated stroking properties
	were converted to an equivalent <{path}> element
	and then filled using the given paint server.

	A subpath consisting of a single “moveto” shall not be stroked.
	Any zero length subpath shall not be stroked
	if the 'stroke-linecap' property has a value of ''stroke-linecap/butt''
	but shall be stroked if the 'stroke-linecap' property has a value of ''stroke-linecap/round'' or ''stroke-linecap/square'',
	producing respectively a circle or a square centered at the given point.
	Examples of zero-length subpaths include
	<code>'M 10,10 L 10,10'</code>,
	<code>'M 20,20 h 0'</code>,
	<code>'M 30,30 z'</code>,
	and <code>'M 40,40 c 0,0 0,0 0,0'</code>.

	Issue: This should be redundant with the stroke shape computation requirements below.
	In this section, we should phrase the requirements descriptively rather than normatively.

### Stroke Shape ### {#algo-stroke-shape}

	<div algorithm="stroke shape">
		The <dfn export>stroke shape</dfn> of an element is the shape that is filled by the 'stroke' property.
		The following algorithm describes what the stroke shape of text, a <{path}>, or basic shape is,
		taking into account the stroking properties above:

		1. Let |shape| be an empty shape.
		2. Let |path| be the <a>equivalent path</a> of the element.
		3. For each |subpath| of |path|:
			1. Let |positions| be the <a>dash positions</a> for the |subpath|.
			2. For each pair (|start|, |end|) in |positions|:
				1. Let |dash| be the shape that includes,
					for all distances between |start| and |end| along the |subpath|,
					all points that lie on the line perpendicular to the |subpath| at that distance
					and which are within distance stroke-width
					of the point on the |subpath| at that position.
				2. Set |dash| to be the union of |dash| and the starting <a>cap shape</a> for the subpath at position |start|.
				3. Set |dash| to be the union of |dash| and the ending <a>cap shape</a> for the subpath at position |end|.
				4. Let |index| and |last| be the indexes of the path segments in the subpath at distance start and end along the subpath.

					Note: It does not matter whether any zero length segments are included when choosing index and last.

				5. While |index| < |last|:
					1. Set |dash| to be the union of |dash| and the <a>line join shape</a> for the subpath at segment index |index|.
					2. Set |index| to index + 1.
				6. Set |shape| to be the union of |shape| and |dash|.
		4. Return |shape|.
	</div>

### Dash Positions ### {#algo-dash-positions}

	Issue: This section doesn't handle 'stroke-dash-corner' and 'stroke-dash-justify' yet.

	<div algorithm="dash positions">
		The <dfn export>dash positions</dfn> for a given subpath
		of the equivalent path of a <{path}> or basic shape
		is a sequence of pairs of values,
		which represent the starting and ending distance along the subpath
		for each of the dashes that form the subpath's stroke.
		It is determined as follows:

		1. Let |pathlength| be the length of the subpath.
		2. Let |dashes| be the list of values of 'stroke-dasharray' on the element,
			repeated if necessary so that it has an even number of elements;
			if the property has the value none,
			then the list has a single value ''0''.
		3. Let |count| be the number of values in |dashes|.
		4. Let |sum| be the sum of the values in |dashes|.
		5. If |sum| = 0, then return a sequence with the single pair (0, |pathlength|).
		6. Let |positions| be an empty sequence.
		7. Let |offset| be the value of the 'stroke-dashoffset' property on the element.
		8. If |offset| is negative, then set |offset| to <code>|sum| − abs(|offset|)</code>.
		9. Set |offset| to <code>|offset| mod |sum|</code>.
		10. Let |index| be the smallest integer such that <code>sum(|dashes|<sub>i</sub>, 0 ≤ i ≤ |index|) ≥ |offset|</code>.
		11. Let |dashlength| be <code>min(sum(|dashes|<sub>i</sub>, 0 ≤ i ≤ |index|) − |offset|, |pathlength|)</code>.
		12. If <code>|index| mod 2 = 0</code>, then append to |positions| the pair (0, |dashlength|).
		13. Let |position| be |dashlength|.
		14. While |position| < |pathlength|:
			1. Set |index| to <code>(|index| + 1) mod |count|</code>.
			2. Let |dashlength| be <code>min(|dashes|<sub>|index|</sub>, |pathlength| − |position|)</code>.
			3. If |index| mod 2 = 0, then append to |positions| the pair (|position|, |position| + |dashlength|).
			4. Set |position| to <code>|position| + |dashlength|</code>.
		15. Return |positions|.
	</div>

### Cap Shapes ### {#algo-cap-shapes}

	<div algorithm="cap shapes">
		The starting and ending <dfn export>cap shapes</dfn> at a given |position| along a subpath are determined as follows:

		1. If 'stroke-linecap' is ''butt'', then return an empty shape.
		2. Otherwise, if 'stroke-linecap' is ''stroke-linecap/round'', then:
			1. If this is a starting cap,
				then return a semicircle of radius 'stroke-width'
				positioned such that:

				* Its straight edge is parallel to
					the line perpendicular to the subpath
					at distance |position| along it.
				* The midpoint of its straight edge is at
					the point that is along the subpath at distance |position|.
				* The direction from the midpoint of its arc to the midpoint of its straight edge
					is the same as the direction of the subpath
					at distance |position| along it.
			2. Otherwise, this is an ending cap.
				Return a semicircle of radius stroke-width
				positioned such that:

					* Its straight edge is parallel to
						the line perpendicular to the subpath
						at distance |position| along it.
					* The midpoint of its straight edge is at
						the point that is along the subpath at distance |position|.
					* The direction from the midpoint of its straight edge to the midpoint of its arc
						is the same as the direction of the subpath
						at distance |position| along it.
		3. Otherwise, 'stroke-linecap' is ''stroke-linecap/square'':
			1. If this is a starting cap,
				then return a rectangle with side lengths 'stroke-width' and 'stroke-width' / 2
				positioned such that:

				* Its longer edges, A and B, are parallel to
					the line perpendicular to the subpath
					at distance |position| along it.
				* The midpoint of A is at |start|.
				* The direction from the midpoint of B to the midpoint of A
					is the same as the direction of the subpath
					at distance |position| along it.
			2. Otherwise, this is an ending cap.
				Return a rectangle with side lengths 'stroke-width' and 'stroke-width' / 2
				positioned such that:

				* Its longer edges, A and B, are parallel to
					the line perpendicular to the subpath
					at distance |position| along it.
				* The midpoint of A is at |end|.
				* The direction from the midpoint of A to the midpoint of B
					is the same as the direction of the subpath
					at distance |position| along it.

		<figure>
			<img src="images/linecap-construction.svg">
			<figcaption>
				The three different stroke-linecap values used on paths with a single, non-zero length subpath.
				The white line is the path itself
				and the thick gray area is the stroke.

				On the top row, the green lines indicate the perpendicular to the tangent at the path endpoints
				and the pink areas are the caps.
				The bottom row shows the stroke without the perpendicular and cap highlighting.
			</figcaption>
		</figure>
	</div>

### Line Join Shape ### {#algo-line-join-shape}

	<div algorithm="line join shape">
		The <dfn export>line join shape</dfn> for a given segment of a subpath is determined as follows:

		1. Let |P| be the point at the end of the segment.
		2. Let |A| be the line parallel to the tangent at the end of the segment.
		3. Let |B| be the line parallel to the tangent at the start of the following segment.
		4. If |A| and |B| are the same line,
			then return an empty shape.
		5. Let |A<sub>left</sub>| and |A<sub>right</sub>|
			be lines parallel to |A|
			at a distance of 'stroke-width' / 2
			to the left and to the right of |A|
			relative to the subpath direction,
			respectively.
		6. Let |B<sub>left</sub>| and |B<sub>right</sub>|
			be lines parallel to |B|
			at a distance of 'stroke-width' / 2
			to the left and to the right of |B|
			relative to the subpath direction,
			respectively.
		7. Let |P<sub>1</sub>|, |P<sub>2</sub>| and |P<sub>3</sub>| be points determined as follows:
			1. If the smaller angle between |A| and |B| is on the right of these lines,
				considering the direction of the subpath,
				then |P<sub>1</sub>| and |P<sub>2</sub>|
				are the points on |A<sub>left</sub>| and |B<sub>left</sub>| closest to |P|,
				and |P<sub>3</sub>| is the intersection of |A<sub>left</sub>| and |B<sub>left</sub>|.
			2. Otherwise, |P<sub>1</sub>| and |P<sub>2</sub>|
				are the points on |A<sub>right</sub>| and |B<sub>right</sub>| closest to |P|,
				and |P<sub>3</sub>| is the intersection of |A<sub>right</sub>| and |B<sub>right</sub>|.
		8. Let |bevel| be the triangle formed from the three points
			|P|, |P<sub>1</sub>| and |P<sub>2</sub>|.
		9. If 'stroke-linejoin' is ''stroke-linejoin/round'',
			then return the union of |bevel|
			and a circular sector of radius 'stroke-width',
			centered on |P|,
			and which has |P<sub>1</sub>| and |P<sub>2</sub>| as the two endpoints of the arc.
		10. If 'stroke-linejoin' is ''arcs'',
			then find the circles that are tangent to the stroke edges at |P<sub>1</sub>| and |P<sub>2</sub>|
			with the same curvature as the edges at those points (see below).
			If both curvatures are zero, fall through to ''miter-clip''.

			Extend the stroke edges using these circles
			(or a line, in the case of zero curvature):

			* If the two circles (or circle and line) do not intersect,
				fall through to ''miter-clip''.

			* If the two circles (or circle and line) intersect,
				the line join region is defined by the lines that connect |P| with |P<sub>1</sub>| and |P<sub>2</sub>|
				and the arcs defined by the circles (or arc and line)
				between the closest intersection point to |P|, and |P<sub>1</sub>| and |P<sub>2</sub>|.

				Next, calculate the |miter limit| as defined in [[#stroke-miterlimit]].
				Clip any part of the line join region that extends past the |miter limit|.
				Return the resulting region.

				Note: Note that the curvatures are calculated in user-space
				before any transforms are applied.
		11. If 'stroke-linejoin' is ''miter'' or ''miter-clip''
			then the line join region is the union of |bevel|
			and the triangle formed from the three points |P<sub>1</sub>|, |P<sub>2</sub>| and |P<sub>3</sub>|.
		12. Let θ be the angle between A and B.
			If <code>1 / sin(θ / 2) ≤ 'stroke-miterlimit'</code>,
			then return the line join region.
		13. If 'stroke-linejoin' is ''miter-clip'',
			then clip any part of the line join region that extends past the miter limit
			and return this region.
		14. Return bevel.

		<figure>
			<img src="images/linejoin-construction.svg">
			<figcaption>
				Construction of a round line join shape, shown in pink.
				The white line is the original path,
				which has two segments that come to a point,
				and the gray region is the stroke.
			</figcaption>
		</figure>

		<figure>
			<img src="images/linejoin-construction-arcs.svg">
			<figcaption>
				Construction of an arcs line join shape, shown in pink.
				The white line is the original path,
				which has two segments that come to a point,
				and the gray region is the stroke.
				The dashed lines show circles that are tangent to
				and have the curvature of
				the segments at the join.
				The olive-green circles
				(concentric with the dashed circles)
				define the join shape.
			</figcaption>
		</figure>
	</div>

### Arcs Linejoin ### {#algo-arcs-linejoin}

	<div algorithm="arcs linejoin">
		The <dfn export>arcs linejoin</dfn> requires finding circles
		that are both tangent to and have the same curvatures as
		the outer stroke edges at the ends of path segments.
		To find one of these circles,
		first calculate the curvature κ of the path segment at its end (see below).
		Next, find the radius of a circle corresponding to this curvature:
		r = 1/κ.
		Increase or decrease the radius by 'stroke-width' / 2
		to account for the stroke:
		rc = r ± stroke-width/2.
		The center of the circle will be on a line normal to the path end
		a distance of rc away from the outer stroke edge at the end.

		<dl class=switch>
			<dt>For a line:
			<dd>
				The curvature is infinite. Extend the outer stroke edge by a line.

			<dt>For an elliptical arc:
			<dd>
				<div role="math">
		    		<span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span id="MathJax-Element-3-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" style="font-size: 127%; position: relative;" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>&amp;#x3BA;</mi><mo stretchy=&quot;false&quot;>(</mo><mi>t</mi><mo stretchy=&quot;false&quot;>)</mo><mo>=</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mrow class=&quot;MJX-TeXAtom-ORD&quot;><msub><mi>r</mi><mi>x</mi></msub><msub><mi>r</mi><mi>y</mi></msub></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>(</mo><msubsup><mi>r</mi><mi>x</mi><mn>2</mn></msubsup><msup><mi>sin</mi><mn>2</mn></msup><mo>&amp;#x2061;</mo><mi>t</mi><mo>+</mo><msubsup><mi>r</mi><mi>y</mi><mn>2</mn></msubsup><msup><mi>cos</mi><mn>2</mn></msup><mo>&amp;#x2061;</mo><mi>t</mi><msup><mo stretchy=&quot;false&quot;>)</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mn>3</mn><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo>/</mo></mrow><mn>2</mn></mrow></msup></mrow></mfrac></mrow></math>" role="presentation"><span id="MJXc-Node-27" class="mjx-math" role="math" aria-hidden="true"><span id="MJXc-Node-28" class="mjx-mrow"><span id="MJXc-Node-29" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">κ</span></span><span id="MJXc-Node-30" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-31" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.396em; padding-bottom: 0.298em;">t</span></span><span id="MJXc-Node-32" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span id="MJXc-Node-33" class="mjx-mo MJXc-space3"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span id="MJXc-Node-34" class="mjx-texatom MJXc-space3"><span id="MJXc-Node-35" class="mjx-mrow"><span id="MJXc-Node-36" class="mjx-mfrac"><span class="mjx-box MJXc-stacked" style="width: 9.76em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 9.76em; top: -1.243em;"><span id="MJXc-Node-37" class="mjx-texatom"><span id="MJXc-Node-38" class="mjx-mrow"><span id="MJXc-Node-39" class="mjx-msub"><span class="mjx-base"><span id="MJXc-Node-40" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-41" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">x</span></span></span></span><span id="MJXc-Node-42" class="mjx-msub"><span class="mjx-base"><span id="MJXc-Node-43" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-44" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.495em; padding-right: 0.006em;">y</span></span></span></span></span></span></span><span class="mjx-denominator" style="width: 9.76em; bottom: -1.193em;"><span id="MJXc-Node-45" class="mjx-texatom"><span id="MJXc-Node-46" class="mjx-mrow"><span id="MJXc-Node-47" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-48" class="mjx-msubsup"><span class="mjx-base"><span id="MJXc-Node-49" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-stack" style="vertical-align: -0.157em;"><span class="mjx-sup" style="font-size: 70.7%; padding-bottom: 0.255em; padding-left: 0px; padding-right: 0.071em;"><span id="MJXc-Node-51" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-sub" style="font-size: 70.7%; padding-right: 0.071em;"><span id="MJXc-Node-50" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">x</span></span></span></span></span><span id="MJXc-Node-52" class="mjx-msup MJXc-space1"><span class="mjx-base"><span id="MJXc-Node-53" class="mjx-mi"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">sin</span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.595em; padding-left: 0px; padding-right: 0.071em;"><span id="MJXc-Node-54" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span id="MJXc-Node-55" class="mjx-mo"><span class="mjx-char"></span></span><span id="MJXc-Node-56" class="mjx-mi MJXc-space1"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.396em; padding-bottom: 0.298em;">t</span></span><span id="MJXc-Node-57" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.298em; padding-bottom: 0.445em;">+</span></span><span id="MJXc-Node-58" class="mjx-msubsup MJXc-space2"><span class="mjx-base"><span id="MJXc-Node-59" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-stack" style="vertical-align: -0.157em;"><span class="mjx-sup" style="font-size: 70.7%; padding-bottom: 0.255em; padding-left: 0px; padding-right: 0.071em;"><span id="MJXc-Node-61" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-sub" style="font-size: 70.7%; padding-right: 0.071em;"><span id="MJXc-Node-60" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.495em; padding-right: 0.006em;">y</span></span></span></span></span><span id="MJXc-Node-62" class="mjx-msup MJXc-space1"><span class="mjx-base"><span id="MJXc-Node-63" class="mjx-mi"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.15em; padding-bottom: 0.347em;">cos</span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.409em; padding-left: 0px; padding-right: 0.071em;"><span id="MJXc-Node-64" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span id="MJXc-Node-65" class="mjx-mo"><span class="mjx-char"></span></span><span id="MJXc-Node-66" class="mjx-mi MJXc-space1"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.396em; padding-bottom: 0.298em;">t</span></span><span id="MJXc-Node-67" class="mjx-msup"><span class="mjx-base"><span id="MJXc-Node-68" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.431em; padding-left: 0px; padding-right: 0.071em;"><span id="MJXc-Node-69" class="mjx-texatom"><span id="MJXc-Node-70" class="mjx-mrow"><span id="MJXc-Node-71" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span><span id="MJXc-Node-72" class="mjx-texatom"><span id="MJXc-Node-73" class="mjx-mrow"><span id="MJXc-Node-74" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">/</span></span></span></span><span id="MJXc-Node-75" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span></span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 9.76em;"></span></span><span class="mjx-vsize" style="height: 2.436em; vertical-align: -1.193em;"></span></span></span></span></span></span></span></span>
				<script type="math/mml" id="MathJax-Element-3">
					<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>κ<!-- κ --></mi>
				      <mo stretchy="false">(</mo>
				      <mi>t</mi>
				      <mo stretchy="false">)</mo>
				      <mo>=</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mrow class="MJX-TeXAtom-ORD">
				            <msub>
				              <mi>r</mi>
				              <mi>x</mi>
				            </msub>
				            <msub>
				              <mi>r</mi>
				              <mi>y</mi>
				            </msub>
					  </mrow>
					  <mrow class="MJX-TeXAtom-ORD">
				            <mo stretchy="false">(</mo>
				            <msubsup>
				              <mi>r</mi>
				              <mi>x</mi>
				              <mn>2</mn>
				            </msubsup>
				            <msup>
				              <mi>sin</mi>
				              <mn>2</mn>
				            </msup>
				            <mo>⁡<!-- ⁡ --></mo>
				            <mi>t</mi>
				            <mo>+</mo>
				            <msubsup>
				              <mi>r</mi>
				              <mi>y</mi>
				              <mn>2</mn>
				            </msubsup>
				            <msup>
				              <mi>cos</mi>
				              <mn>2</mn>
				            </msup>
				            <mo>⁡<!-- ⁡ --></mo>
				            <mi>t</mi>
				            <msup>
				              <mo stretchy="false">)</mo>
				              <mrow class="MJX-TeXAtom-ORD">
						<mn>3</mn>
						<mrow class="MJX-TeXAtom-ORD">
						  <mo>/</mo>
						</mrow>
						<mn>2</mn>
				              </mrow>
				            </msup>
					  </mrow>
					</mfrac>
				      </mrow>
				    </math>
				</script>
				<!--<pre id="math-curvature-of-ellipse">$$\kappa(t) = {{r_x r_y}\over{(r_x^2 \sin^2 t + r_y^2 \cos^2 t)^{3/2}}}$$</pre>-->
			</div>

			where:

			<div role="math">
				<span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span id="MathJax-Element-4-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" style="font-size: 127%; position: relative;" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>t</mi><mo>=</mo><mi>arctan</mi><mo>&amp;#x2061;</mo><mo stretchy=&quot;false&quot;>(</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><msub><mi>r</mi><mi>y</mi></msub><msub><mi>r</mi><mi>x</mi></msub></mfrac></mrow><mi>tan</mi><mo>&amp;#x2061;</mo><mi>&amp;#x3B8;</mi><mo stretchy=&quot;false&quot;>)</mo></math>" role="presentation"><span id="MJXc-Node-76" class="mjx-math" role="math" aria-hidden="true"><span id="MJXc-Node-77" class="mjx-mrow"><span id="MJXc-Node-78" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.396em; padding-bottom: 0.298em;">t</span></span><span id="MJXc-Node-79" class="mjx-mo MJXc-space3"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span id="MJXc-Node-80" class="mjx-mi MJXc-space3"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.347em; padding-bottom: 0.347em;">arctan</span></span><span id="MJXc-Node-81" class="mjx-mo"><span class="mjx-char"></span></span><span id="MJXc-Node-82" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-83" class="mjx-texatom"><span id="MJXc-Node-84" class="mjx-mrow"><span id="MJXc-Node-85" class="mjx-mfrac"><span class="mjx-box MJXc-stacked" style="width: 1.091em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 1.091em; top: -1.243em;"><span id="MJXc-Node-86" class="mjx-msub"><span class="mjx-base"><span id="MJXc-Node-87" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-88" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.495em; padding-right: 0.006em;">y</span></span></span></span></span><span class="mjx-denominator" style="width: 1.091em; bottom: -0.861em;"><span id="MJXc-Node-89" class="mjx-msub"><span class="mjx-base"><span id="MJXc-Node-90" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">r</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-91" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">x</span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 1.091em;"></span></span><span class="mjx-vsize" style="height: 2.105em; vertical-align: -0.861em;"></span></span></span></span><span id="MJXc-Node-92" class="mjx-mi MJXc-space1"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.347em; padding-bottom: 0.347em;">tan</span></span><span id="MJXc-Node-93" class="mjx-mo"><span class="mjx-char"></span></span><span id="MJXc-Node-94" class="mjx-mi MJXc-space1"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.495em; padding-bottom: 0.298em;">θ</span></span><span id="MJXc-Node-95" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span></span>
			    <script type="math/mml" id="MathJax-Element-4">
				    <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>t</mi>
				      <mo>=</mo>
				      <mi>arctan</mi>
				      <mo>⁡<!-- ⁡ --></mo>
				      <mo stretchy="false">(</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <msub>
				            <mi>r</mi>
				            <mi>y</mi>
					  </msub>
					  <msub>
				            <mi>r</mi>
				            <mi>x</mi>
					  </msub>
					</mfrac>
				      </mrow>
				      <mi>tan</mi>
				      <mo>⁡<!-- ⁡ --></mo>
				      <mi>θ<!-- θ --></mi>
				      <mo stretchy="false">)</mo>
				    </math>
				</script>
				<!--<pre id="math-curvature-t">$$t = \arctan ( {r_y \over r_x} \tan \theta )$$</pre>-->
			</div>

			The parameter θ at the beginning or end of an arc segment
			can be found by using the formulas in the
			<a href="https://svgwg.org/svg2-draft/implnote.html#ArcImplementationNotes">Elliptical arc implementation notes</a>.
			(Note, some renderers convert elliptical arcs to cubic Béziers prior to rendering
			so the equations here may not be needed.)

		<dt>For a quadratic Bézier:
		<dd>
			<div role="math">
		    	<span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span id="MathJax-Element-5-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" style="font-size: 127%; position: relative;" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>&amp;#x3BA;</mi><mo stretchy=&quot;false&quot;>(</mo><mn>0</mn><mo stretchy=&quot;false&quot;>)</mo><mo>=</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mn>1</mn><mn>2</mn></mfrac></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mrow><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>1</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>0</mn></msub><mo stretchy=&quot;false&quot;>)</mo><mo>&amp;#xD7;</mo><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>2</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>1</mn></msub><mo stretchy=&quot;false&quot;>)</mo></mrow><mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><msub><mi>P</mi><mn>1</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>0</mn></msub><msup><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><mn>3</mn></msup></mrow></mfrac></mrow></math>" role="presentation"><span id="MJXc-Node-96" class="mjx-math" role="math" aria-hidden="true"><span id="MJXc-Node-97" class="mjx-mrow"><span id="MJXc-Node-98" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">κ</span></span><span id="MJXc-Node-99" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-100" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span><span id="MJXc-Node-101" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span id="MJXc-Node-102" class="mjx-mo MJXc-space3"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span id="MJXc-Node-103" class="mjx-texatom MJXc-space3"><span id="MJXc-Node-104" class="mjx-mrow"><span id="MJXc-Node-105" class="mjx-mfrac"><span class="mjx-box MJXc-stacked" style="width: 0.7em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 0.7em; top: -1.368em;"><span id="MJXc-Node-106" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span><span class="mjx-denominator" style="width: 0.7em; bottom: -0.711em;"><span id="MJXc-Node-107" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 0.7em;"></span></span><span class="mjx-vsize" style="height: 2.078em; vertical-align: -0.711em;"></span></span></span></span><span id="MJXc-Node-108" class="mjx-texatom"><span id="MJXc-Node-109" class="mjx-mrow"><span id="MJXc-Node-110" class="mjx-mfrac"><span class="mjx-box MJXc-stacked" style="width: 9.547em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 9.547em; top: -1.514em;"><span id="MJXc-Node-111" class="mjx-mrow"><span id="MJXc-Node-112" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-113" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-114" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-115" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span id="MJXc-Node-116" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-117" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-118" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-119" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span></span></span><span id="MJXc-Node-120" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span id="MJXc-Node-121" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.199em; padding-bottom: 0.347em;">×</span></span><span id="MJXc-Node-122" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-123" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-124" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-125" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span id="MJXc-Node-126" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-127" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-128" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-129" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span id="MJXc-Node-130" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span></span><span class="mjx-denominator" style="width: 9.547em; bottom: -1.228em;"><span id="MJXc-Node-131" class="mjx-mrow"><span id="MJXc-Node-132" class="mjx-texatom"><span id="MJXc-Node-133" class="mjx-mrow"><span id="MJXc-Node-134" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span><span id="MJXc-Node-135" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-136" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-137" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span id="MJXc-Node-138" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-139" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-140" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-141" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span></span></span><span id="MJXc-Node-142" class="mjx-msup"><span class="mjx-base"><span id="MJXc-Node-143" class="mjx-texatom"><span id="MJXc-Node-144" class="mjx-mrow"><span id="MJXc-Node-145" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.71em; padding-left: 0px; padding-right: 0.071em;"><span id="MJXc-Node-146" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 9.547em;"></span></span><span class="mjx-vsize" style="height: 2.741em; vertical-align: -1.228em;"></span></span></span></span></span></span></span></span>
				<script type="math/mml" id="MathJax-Element-5">
				    <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>κ<!-- κ --></mi>
				      <mo stretchy="false">(</mo>
				      <mn>0</mn>
				      <mo stretchy="false">)</mo>
				      <mo>=</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mn>1</mn>
					  <mn>2</mn>
					</mfrac>
				      </mrow>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mrow>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>0</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
				            <mo>×<!-- × --></mo>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
					  </mrow>
					  <mrow>
				            <mrow class="MJX-TeXAtom-ORD">
				              <mo stretchy="false">|</mo>
				            </mrow>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>0</mn>
				            </msub>
				            <msup>
				              <mrow class="MJX-TeXAtom-ORD">
						<mo stretchy="false">|</mo>
				              </mrow>
				              <mn>3</mn>
				            </msup>
					  </mrow>
					</mfrac>
				      </mrow>
				    </math>
				</script>
				<!--<pre id="math-quadratic-start">$$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$</pre>-->
			</div>

			<div role="math">
				<span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span id="MathJax-Element-6-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" style="font-size: 127%; position: relative;" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>&amp;#x3BA;</mi><mo stretchy=&quot;false&quot;>(</mo><mn>1</mn><mo stretchy=&quot;false&quot;>)</mo><mo>=</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mn>1</mn><mn>2</mn></mfrac></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mrow><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>2</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>1</mn></msub><mo stretchy=&quot;false&quot;>)</mo><mo>&amp;#xD7;</mo><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>0</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>1</mn></msub><mo stretchy=&quot;false&quot;>)</mo></mrow><mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><msub><mi>P</mi><mn>2</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>1</mn></msub><msup><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><mn>3</mn></msup></mrow></mfrac></mrow></math>" role="presentation"><span id="MJXc-Node-147" class="mjx-math" role="math" aria-hidden="true"><span id="MJXc-Node-148" class="mjx-mrow"><span id="MJXc-Node-149" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">κ</span></span><span id="MJXc-Node-150" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-151" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span><span id="MJXc-Node-152" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span id="MJXc-Node-153" class="mjx-mo MJXc-space3"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span id="MJXc-Node-154" class="mjx-texatom MJXc-space3"><span id="MJXc-Node-155" class="mjx-mrow"><span id="MJXc-Node-156" class="mjx-mfrac"><span class="mjx-box MJXc-stacked" style="width: 0.7em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 0.7em; top: -1.368em;"><span id="MJXc-Node-157" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span><span class="mjx-denominator" style="width: 0.7em; bottom: -0.711em;"><span id="MJXc-Node-158" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 0.7em;"></span></span><span class="mjx-vsize" style="height: 2.078em; vertical-align: -0.711em;"></span></span></span></span><span id="MJXc-Node-159" class="mjx-texatom"><span id="MJXc-Node-160" class="mjx-mrow"><span id="MJXc-Node-161" class="mjx-mfrac"><span class="mjx-box MJXc-stacked" style="width: 9.547em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 9.547em; top: -1.514em;"><span id="MJXc-Node-162" class="mjx-mrow"><span id="MJXc-Node-163" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-164" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-165" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-166" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span id="MJXc-Node-167" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-168" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-169" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-170" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span id="MJXc-Node-171" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span id="MJXc-Node-172" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.199em; padding-bottom: 0.347em;">×</span></span><span id="MJXc-Node-173" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-174" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-175" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-176" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span></span></span><span id="MJXc-Node-177" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-178" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-179" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-180" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span id="MJXc-Node-181" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span></span><span class="mjx-denominator" style="width: 9.547em; bottom: -1.228em;"><span id="MJXc-Node-182" class="mjx-mrow"><span id="MJXc-Node-183" class="mjx-texatom"><span id="MJXc-Node-184" class="mjx-mrow"><span id="MJXc-Node-185" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span><span id="MJXc-Node-186" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-187" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-188" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span id="MJXc-Node-189" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-190" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-191" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-192" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span id="MJXc-Node-193" class="mjx-msup"><span class="mjx-base"><span id="MJXc-Node-194" class="mjx-texatom"><span id="MJXc-Node-195" class="mjx-mrow"><span id="MJXc-Node-196" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.71em; padding-left: 0px; padding-right: 0.071em;"><span id="MJXc-Node-197" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 9.547em;"></span></span><span class="mjx-vsize" style="height: 2.741em; vertical-align: -1.228em;"></span></span></span></span></span></span></span></span>
				<script type="math/mml" id="MathJax-Element-6">
					<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>κ<!-- κ --></mi>
				      <mo stretchy="false">(</mo>
				      <mn>1</mn>
				      <mo stretchy="false">)</mo>
				      <mo>=</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mn>1</mn>
					  <mn>2</mn>
					</mfrac>
				      </mrow>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mrow>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
				            <mo>×<!-- × --></mo>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>0</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
					  </mrow>
					  <mrow>
				            <mrow class="MJX-TeXAtom-ORD">
				              <mo stretchy="false">|</mo>
				            </mrow>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <msup>
				              <mrow class="MJX-TeXAtom-ORD">
						<mo stretchy="false">|</mo>
				              </mrow>
				              <mn>3</mn>
				            </msup>
					  </mrow>
					</mfrac>
				      </mrow>
				    </math>
				</script>
				<!--<pre id="math-quadratic-end">$$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$</pre>-->
			</div>

			Where κ(0) and κ(1) are the signed curvatures
			at the start and end of the path segment respectively,
			and the P's are the three points that define the quadratic Bézier.

		<dt>For a cubic Bézier:
		<dd>
			<div role="math">
				<span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span id="MathJax-Element-7-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" style="font-size: 127%; position: relative;" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>&amp;#x3BA;</mi><mo stretchy=&quot;false&quot;>(</mo><mn>0</mn><mo stretchy=&quot;false&quot;>)</mo><mo>=</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mn>2</mn><mn>3</mn></mfrac></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mrow><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>1</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>0</mn></msub><mo stretchy=&quot;false&quot;>)</mo><mo>&amp;#xD7;</mo><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>2</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>1</mn></msub><mo stretchy=&quot;false&quot;>)</mo></mrow><mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><msub><mi>P</mi><mn>1</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>0</mn></msub><msup><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><mn>3</mn></msup></mrow></mfrac></mrow></math>" role="presentation"><span id="MJXc-Node-198" class="mjx-math" role="math" aria-hidden="true"><span id="MJXc-Node-199" class="mjx-mrow"><span id="MJXc-Node-200" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">κ</span></span><span id="MJXc-Node-201" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-202" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span><span id="MJXc-Node-203" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span id="MJXc-Node-204" class="mjx-mo MJXc-space3"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span id="MJXc-Node-205" class="mjx-texatom MJXc-space3"><span id="MJXc-Node-206" class="mjx-mrow"><span id="MJXc-Node-207" class="mjx-mfrac"><span class="mjx-box MJXc-stacked" style="width: 0.7em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 0.7em; top: -1.368em;"><span id="MJXc-Node-208" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-denominator" style="width: 0.7em; bottom: -0.733em;"><span id="MJXc-Node-209" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 0.7em;"></span></span><span class="mjx-vsize" style="height: 2.1em; vertical-align: -0.733em;"></span></span></span></span><span id="MJXc-Node-210" class="mjx-texatom"><span id="MJXc-Node-211" class="mjx-mrow"><span id="MJXc-Node-212" class="mjx-mfrac"><span class="mjx-box MJXc-stacked" style="width: 9.547em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 9.547em; top: -1.514em;"><span id="MJXc-Node-213" class="mjx-mrow"><span id="MJXc-Node-214" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-215" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-216" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-217" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span id="MJXc-Node-218" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-219" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-220" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-221" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span></span></span><span id="MJXc-Node-222" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span id="MJXc-Node-223" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.199em; padding-bottom: 0.347em;">×</span></span><span id="MJXc-Node-224" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-225" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-226" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-227" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span id="MJXc-Node-228" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-229" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-230" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-231" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span id="MJXc-Node-232" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span></span><span class="mjx-denominator" style="width: 9.547em; bottom: -1.228em;"><span id="MJXc-Node-233" class="mjx-mrow"><span id="MJXc-Node-234" class="mjx-texatom"><span id="MJXc-Node-235" class="mjx-mrow"><span id="MJXc-Node-236" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span><span id="MJXc-Node-237" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-238" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-239" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span id="MJXc-Node-240" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-241" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-242" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-243" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">0</span></span></span></span><span id="MJXc-Node-244" class="mjx-msup"><span class="mjx-base"><span id="MJXc-Node-245" class="mjx-texatom"><span id="MJXc-Node-246" class="mjx-mrow"><span id="MJXc-Node-247" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.71em; padding-left: 0px; padding-right: 0.071em;"><span id="MJXc-Node-248" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 9.547em;"></span></span><span class="mjx-vsize" style="height: 2.741em; vertical-align: -1.228em;"></span></span></span></span></span></span></span></span>
				<script type="math/mml" id="MathJax-Element-7">
					<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>κ<!-- κ --></mi>
				      <mo stretchy="false">(</mo>
				      <mn>0</mn>
				      <mo stretchy="false">)</mo>
				      <mo>=</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mn>2</mn>
					  <mn>3</mn>
					</mfrac>
				      </mrow>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mrow>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>0</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
				            <mo>×<!-- × --></mo>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
					  </mrow>
					  <mrow>
				            <mrow class="MJX-TeXAtom-ORD">
				              <mo stretchy="false">|</mo>
				            </mrow>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>0</mn>
				            </msub>
				            <msup>
				              <mrow class="MJX-TeXAtom-ORD">
						<mo stretchy="false">|</mo>
				              </mrow>
				              <mn>3</mn>
				            </msup>
					  </mrow>
					</mfrac>
				      </mrow>
			    	</math>
				</script>
				<!--<pre id="math-cubic-start">$$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$</pre>-->
			</div>

			<div role="math">
				<span class="MathJax_Preview" style="color: inherit;"></span><span class="mjx-chtml MJXc-display" style="text-align: center;"><span id="MathJax-Element-8-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" style="font-size: 127%; position: relative;" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>&amp;#x3BA;</mi><mo stretchy=&quot;false&quot;>(</mo><mn>1</mn><mo stretchy=&quot;false&quot;>)</mo><mo>=</mo><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mn>2</mn><mn>3</mn></mfrac></mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mfrac><mrow><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>3</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>2</mn></msub><mo stretchy=&quot;false&quot;>)</mo><mo>&amp;#xD7;</mo><mo stretchy=&quot;false&quot;>(</mo><msub><mi>P</mi><mn>1</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>2</mn></msub><mo stretchy=&quot;false&quot;>)</mo></mrow><mrow><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><msub><mi>P</mi><mn>3</mn></msub><mo>&amp;#x2212;</mo><msub><mi>P</mi><mn>2</mn></msub><msup><mrow class=&quot;MJX-TeXAtom-ORD&quot;><mo stretchy=&quot;false&quot;>|</mo></mrow><mn>3</mn></msup></mrow></mfrac></mrow></math>" role="presentation"><span id="MJXc-Node-249" class="mjx-math" role="math" aria-hidden="true"><span id="MJXc-Node-250" class="mjx-mrow"><span id="MJXc-Node-251" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.199em; padding-bottom: 0.298em;">κ</span></span><span id="MJXc-Node-252" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-253" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span><span id="MJXc-Node-254" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span id="MJXc-Node-255" class="mjx-mo MJXc-space3"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.101em; padding-bottom: 0.298em;">=</span></span><span id="MJXc-Node-256" class="mjx-texatom MJXc-space3"><span id="MJXc-Node-257" class="mjx-mrow"><span id="MJXc-Node-258" class="mjx-mfrac"><span class="mjx-box MJXc-stacked" style="width: 0.7em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 0.7em; top: -1.368em;"><span id="MJXc-Node-259" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span><span class="mjx-denominator" style="width: 0.7em; bottom: -0.733em;"><span id="MJXc-Node-260" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 0.7em;"></span></span><span class="mjx-vsize" style="height: 2.1em; vertical-align: -0.733em;"></span></span></span></span><span id="MJXc-Node-261" class="mjx-texatom"><span id="MJXc-Node-262" class="mjx-mrow"><span id="MJXc-Node-263" class="mjx-mfrac"><span class="mjx-box MJXc-stacked" style="width: 9.547em; padding: 0px 0.12em;"><span class="mjx-numerator" style="width: 9.547em; top: -1.514em;"><span id="MJXc-Node-264" class="mjx-mrow"><span id="MJXc-Node-265" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-266" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-267" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-268" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span><span id="MJXc-Node-269" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-270" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-271" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-272" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span id="MJXc-Node-273" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span><span id="MJXc-Node-274" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.199em; padding-bottom: 0.347em;">×</span></span><span id="MJXc-Node-275" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">(</span></span><span id="MJXc-Node-276" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-277" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-278" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">1</span></span></span></span><span id="MJXc-Node-279" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-280" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-281" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-282" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span id="MJXc-Node-283" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">)</span></span></span></span><span class="mjx-denominator" style="width: 9.547em; bottom: -1.228em;"><span id="MJXc-Node-284" class="mjx-mrow"><span id="MJXc-Node-285" class="mjx-texatom"><span id="MJXc-Node-286" class="mjx-mrow"><span id="MJXc-Node-287" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span><span id="MJXc-Node-288" class="mjx-msub"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-289" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-290" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span><span id="MJXc-Node-291" class="mjx-mo MJXc-space2"><span class="mjx-char MJXc-TeX-main-R" style="margin-top: 0.002em; padding-bottom: 0.298em;">−</span></span><span id="MJXc-Node-292" class="mjx-msub MJXc-space2"><span class="mjx-base" style="margin-right: -0.109em;"><span id="MJXc-Node-293" class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.445em; padding-bottom: 0.298em; padding-right: 0.109em;">P</span></span></span><span class="mjx-sub" style="font-size: 70.7%; vertical-align: -0.212em; padding-right: 0.071em;"><span id="MJXc-Node-294" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">2</span></span></span></span><span id="MJXc-Node-295" class="mjx-msup"><span class="mjx-base"><span id="MJXc-Node-296" class="mjx-texatom"><span id="MJXc-Node-297" class="mjx-mrow"><span id="MJXc-Node-298" class="mjx-mo"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.445em; padding-bottom: 0.593em;">|</span></span></span></span></span><span class="mjx-sup" style="font-size: 70.7%; vertical-align: 0.71em; padding-left: 0px; padding-right: 0.071em;"><span id="MJXc-Node-299" class="mjx-mn"><span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.396em; padding-bottom: 0.347em;">3</span></span></span></span></span></span><span class="mjx-line" style="border-bottom: 1.3px solid; top: -0.281em; width: 9.547em;"></span></span><span class="mjx-vsize" style="height: 2.741em; vertical-align: -1.228em;"></span></span></span></span></span></span></span></span>
				<script type="math/mml" id="MathJax-Element-8">
					<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
				      <mi>κ<!-- κ --></mi>
				      <mo stretchy="false">(</mo>
				      <mn>1</mn>
				      <mo stretchy="false">)</mo>
				      <mo>=</mo>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mn>2</mn>
					  <mn>3</mn>
					</mfrac>
				      </mrow>
				      <mrow class="MJX-TeXAtom-ORD">
					<mfrac>
					  <mrow>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>3</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
				            <mo>×<!-- × --></mo>
				            <mo stretchy="false">(</mo>
				            <msub>
				              <mi>P</mi>
				              <mn>1</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <mo stretchy="false">)</mo>
					  </mrow>
					  <mrow>
				            <mrow class="MJX-TeXAtom-ORD">
				              <mo stretchy="false">|</mo>
				            </mrow>
				            <msub>
				              <mi>P</mi>
				              <mn>3</mn>
				            </msub>
				            <mo>−<!-- − --></mo>
				            <msub>
				              <mi>P</mi>
				              <mn>2</mn>
				            </msub>
				            <msup>
				              <mrow class="MJX-TeXAtom-ORD">
						<mo stretchy="false">|</mo>
				              </mrow>
				              <mn>3</mn>
				            </msup>
					  </mrow>
					</mfrac>
				      </mrow>
					</math>
				</script>
				<!--<pre id="math-cubic-end">$$\kappa(1) = {2\over3}{(P_3-P_2)\times((P_1-P_2)+(P_3-P_2))\over|P_3-P_2|^3}$$</pre>-->
			</div>

			Where κ(0) and κ(1) are the signed curvatures
			at the start and end of the path segment respectively,
			and the P's are the four points that define the cubic Bézier.
			Note, if P0 and P1, or P2 and P3, are degenerate,
			the curvature will be infinite
			and a line should be used in constructing the join.
	</dl>


## Perfect-World Syntax ## {#perfect-world}

	The 'stroke-*' properties and values from SVG inherit SVG's somewhat incoherent naming schemes.
	We'd name them differently if they were being designed today.
	We should see how much we can move toward this,
	perhaps with alias/shorthands.

	<table class=data>
		<colgroup span=1></colgroup>
		<colgroup span=1></colgroup>
		<thead>
			<tr>
				<th>Old Syntax
				<th>New Syntax
		<tbody>
			<tr>
				<td>stroke
				<td>stroke-paint
			<tr>
				<td>
				<td>'stroke' shorthand
			<tr>
				<td>stroke-alignment
				<td>stroke-align: inset | outset | center
			<tr>
				<td>stroke-opacity
				<td>no change
			<tr>
				<td>stroke-width
				<td>no change
			<tr>
				<td>stroke-linecap
				<td>stroke-cap: none | round | square
			<tr>
				<td>stroke-linejoin
				<td>stroke-corner-shape: bevel | round | [ arc | miter ] [ bevel | round ]?
			<tr>
				<td>stroke-miterlimit
				<td>stroke-corner-limit
			<tr>
				<td>stroke-dasharray
				<td>stroke-dash-array
			<tr>
				<td>stroke-dashoffset
				<td>stroke-dash-offset
			<tr>
				<td>stroke-dashcorner
				<td>stroke-dash-corner
			<tr>
				<td>stroke-dashadjust
				<td>stroke-dash-justify: none | [ stretch | compress ] || [ dashes | gaps ]
			<tr>
				<td>
				<td>stroke-dash shorthand
	</table>


Text Decoration Fills and Strokes {#text-decor}
===============================================

	For handling fills and strokes on text decorations,
	two sets of 'fill' and 'stroke' properties are defined:
	one prefixed with 'text-decoration-*' for [[css-text-decor-3#line-decoration|line decorations]]
	and one prefixed with 'text-emphasis-*' for [[css-text-decor-3#emphasis-marks|emphasis marks]].
	These properties are exactly analogous to the 'fill' and 'stroke' properties above,
	except that:

	* (like 'text-decoration' itself) the 'text-decoration-*' variants do not inherit.
	* the initial value of each such property is a <css>match-text</css> keyword
		which takes the value from the element’s corresponding 'fill-*'/'stroke-*' property.

	Issue: These should definitely be at-risk,
	possibly deferred to the next level.

Privacy and Security Considerations {#priv-sec}
===============================================

This specification introduces no new privacy or security considerations.


<style type="text/css">.mjx-chtml {display: inline-block; line-height: 0; text-indent: 0; text-align: left; text-transform: none; font-style: normal; font-weight: normal; font-size: 100%; font-size-adjust: none; letter-spacing: normal; word-wrap: normal; word-spacing: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0; min-height: 0; border: 0; margin: 0; padding: 1px 0}
.MJXc-display {display: block; text-align: center; margin: 1em 0; padding: 0}
.mjx-chtml[tabindex]:focus, body :focus .mjx-chtml[tabindex] {display: inline-table}
.mjx-math {display: inline-block; border-collapse: separate; border-spacing: 0}
.mjx-math * {display: inline-block; text-align: left}
.mjx-numerator {display: block; text-align: center}
.mjx-denominator {display: block; text-align: center}
.MJXc-stacked {height: 0; position: relative}
.MJXc-stacked > * {position: absolute}
.MJXc-bevelled > * {display: inline-block}
.mjx-stack {display: inline-block}
.mjx-op {display: block}
.mjx-under {display: table-cell}
.mjx-over {display: block}
.mjx-over > * {padding-left: 0px!important; padding-right: 0px!important}
.mjx-under > * {padding-left: 0px!important; padding-right: 0px!important}
.mjx-stack > .mjx-sup {display: block}
.mjx-stack > .mjx-sub {display: block}
.mjx-prestack > .mjx-presup {display: block}
.mjx-prestack > .mjx-presub {display: block}
.mjx-delim-h > .mjx-char {display: inline-block}
.mjx-surd {vertical-align: top}
.mjx-mphantom * {visibility: hidden}
.mjx-merror {background-color: #FFFF88; color: #CC0000; border: 1px solid #CC0000; padding: 2px 3px; font-style: normal; font-size: 90%}
.mjx-annotation-xml {line-height: normal}
.mjx-menclose > svg {fill: none; stroke: currentColor}
.mjx-mtr {display: table-row}
.mjx-mlabeledtr {display: table-row}
.mjx-mtd {display: table-cell; text-align: center}
.mjx-label {display: block}
.mjx-box {display: inline-block}
.mjx-block {display: block}
.mjx-span {display: inline}
.mjx-char {display: block; white-space: pre}
.mjx-itable {display: inline-table}
.mjx-row {display: table-row}
.mjx-cell {display: table-cell}
.mjx-table {display: table; width: 100%}
.mjx-line {display: block; height: 0}
.mjx-strut {width: 0; padding-top: 1em}
.mjx-vsize {width: 0}
.MJXc-space1 {margin-left: .167em}
.MJXc-space2 {margin-left: .222em}
.MJXc-space3 {margin-left: .278em}
.mjx-chartest {display: block; visibility: hidden; position: absolute; top: 0; line-height: normal; font-size: 500%}
.mjx-chartest .mjx-char {display: inline}
.mjx-chartest .mjx-box {padding-top: 1000px}
.MJXc-processing {visibility: hidden; position: fixed; width: 0; height: 0; overflow: hidden}
.MJXc-processed {display: none}
.mjx-test {display: block; font-style: normal; font-weight: normal; font-size: 100%; font-size-adjust: none; text-indent: 0; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow: hidden; height: 1px}
.mjx-ex-box-test {position: absolute; width: 1px; height: 60ex}
#MathJax_CHTML_Tooltip {background-color: InfoBackground; color: InfoText; border: 1px solid black; box-shadow: 2px 2px 5px #AAAAAA; -webkit-box-shadow: 2px 2px 5px #AAAAAA; -moz-box-shadow: 2px 2px 5px #AAAAAA; -khtml-box-shadow: 2px 2px 5px #AAAAAA; padding: 3px 4px; z-index: 401; position: absolute; left: 0; top: 0; width: auto; height: auto; display: none}
.MathJax_SVG .noError {font-size: 90%; text-align: left; color: black; padding: 1px 3px; border: 1px solid}
.MathJax .noError {font-size: 90%; text-align: left; color: black; padding: 1px 3px; border: 1px solid}
.mjx-chtml .mjx-noError {line-height: 1.2; font-size: 90%; text-align: left; color: black; padding: 1px 3px; border: 1px solid}
.MJXc-TeX-unknown-R {font-family: STIXGeneral,'Cambria Math','Arial Unicode MS',serif; font-style: normal; font-weight: normal}
.MJXc-TeX-unknown-I {font-family: STIXGeneral,'Cambria Math','Arial Unicode MS',serif; font-style: italic; font-weight: normal}
.MJXc-TeX-unknown-B {font-family: STIXGeneral,'Cambria Math','Arial Unicode MS',serif; font-style: normal; font-weight: bold}
.MJXc-TeX-unknown-BI {font-family: STIXGeneral,'Cambria Math','Arial Unicode MS',serif; font-style: italic; font-weight: bold}
.MJXc-TeX-ams-R {font-family: MJXc-TeX-ams-R,MJXc-TeX-ams-Rw}
.MJXc-TeX-cal-B {font-family: MJXc-TeX-cal-B,MJXc-TeX-cal-Bx,MJXc-TeX-cal-Bw}
.MJXc-TeX-frak-R {font-family: MJXc-TeX-frak-R,MJXc-TeX-frak-Rw}
.MJXc-TeX-frak-B {font-family: MJXc-TeX-frak-B,MJXc-TeX-frak-Bx,MJXc-TeX-frak-Bw}
.MJXc-TeX-math-BI {font-family: MJXc-TeX-math-BI,MJXc-TeX-math-BIx,MJXc-TeX-math-BIw}
.MJXc-TeX-sans-R {font-family: MJXc-TeX-sans-R,MJXc-TeX-sans-Rw}
.MJXc-TeX-sans-B {font-family: MJXc-TeX-sans-B,MJXc-TeX-sans-Bx,MJXc-TeX-sans-Bw}
.MJXc-TeX-sans-I {font-family: MJXc-TeX-sans-I,MJXc-TeX-sans-Ix,MJXc-TeX-sans-Iw}
.MJXc-TeX-script-R {font-family: MJXc-TeX-script-R,MJXc-TeX-script-Rw}
.MJXc-TeX-type-R {font-family: MJXc-TeX-type-R,MJXc-TeX-type-Rw}
.MJXc-TeX-cal-R {font-family: MJXc-TeX-cal-R,MJXc-TeX-cal-Rw}
.MJXc-TeX-main-B {font-family: MJXc-TeX-main-B,MJXc-TeX-main-Bx,MJXc-TeX-main-Bw}
.MJXc-TeX-main-I {font-family: MJXc-TeX-main-I,MJXc-TeX-main-Ix,MJXc-TeX-main-Iw}
.MJXc-TeX-main-R {font-family: MJXc-TeX-main-R,MJXc-TeX-main-Rw}
.MJXc-TeX-math-I {font-family: MJXc-TeX-math-I,MJXc-TeX-math-Ix,MJXc-TeX-math-Iw}
.MJXc-TeX-size1-R {font-family: MJXc-TeX-size1-R,MJXc-TeX-size1-Rw}
.MJXc-TeX-size2-R {font-family: MJXc-TeX-size2-R,MJXc-TeX-size2-Rw}
.MJXc-TeX-size3-R {font-family: MJXc-TeX-size3-R,MJXc-TeX-size3-Rw}
.MJXc-TeX-size4-R {font-family: MJXc-TeX-size4-R,MJXc-TeX-size4-Rw}
@font-face {font-family: MJXc-TeX-ams-R; src: local('MathJax_AMS'), local('MathJax_AMS-Regular')}
@font-face {font-family: MJXc-TeX-ams-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_AMS-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_AMS-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_AMS-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-cal-B; src: local('MathJax_Caligraphic Bold'), local('MathJax_Caligraphic-Bold')}
@font-face {font-family: MJXc-TeX-cal-Bx; src: local('MathJax_Caligraphic'); font-weight: bold}
@font-face {font-family: MJXc-TeX-cal-Bw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Bold.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Bold.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Bold.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-frak-R; src: local('MathJax_Fraktur'), local('MathJax_Fraktur-Regular')}
@font-face {font-family: MJXc-TeX-frak-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-frak-B; src: local('MathJax_Fraktur Bold'), local('MathJax_Fraktur-Bold')}
@font-face {font-family: MJXc-TeX-frak-Bx; src: local('MathJax_Fraktur'); font-weight: bold}
@font-face {font-family: MJXc-TeX-frak-Bw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Bold.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Bold.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Bold.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-math-BI; src: local('MathJax_Math BoldItalic'), local('MathJax_Math-BoldItalic')}
@font-face {font-family: MJXc-TeX-math-BIx; src: local('MathJax_Math'); font-weight: bold; font-style: italic}
@font-face {font-family: MJXc-TeX-math-BIw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Math-BoldItalic.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Math-BoldItalic.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Math-BoldItalic.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-sans-R; src: local('MathJax_SansSerif'), local('MathJax_SansSerif-Regular')}
@font-face {font-family: MJXc-TeX-sans-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-sans-B; src: local('MathJax_SansSerif Bold'), local('MathJax_SansSerif-Bold')}
@font-face {font-family: MJXc-TeX-sans-Bx; src: local('MathJax_SansSerif'); font-weight: bold}
@font-face {font-family: MJXc-TeX-sans-Bw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Bold.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Bold.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Bold.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-sans-I; src: local('MathJax_SansSerif Italic'), local('MathJax_SansSerif-Italic')}
@font-face {font-family: MJXc-TeX-sans-Ix; src: local('MathJax_SansSerif'); font-style: italic}
@font-face {font-family: MJXc-TeX-sans-Iw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Italic.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Italic.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Italic.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-script-R; src: local('MathJax_Script'), local('MathJax_Script-Regular')}
@font-face {font-family: MJXc-TeX-script-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Script-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Script-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Script-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-type-R; src: local('MathJax_Typewriter'), local('MathJax_Typewriter-Regular')}
@font-face {font-family: MJXc-TeX-type-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Typewriter-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Typewriter-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Typewriter-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-cal-R; src: local('MathJax_Caligraphic'), local('MathJax_Caligraphic-Regular')}
@font-face {font-family: MJXc-TeX-cal-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-main-B; src: local('MathJax_Main Bold'), local('MathJax_Main-Bold')}
@font-face {font-family: MJXc-TeX-main-Bx; src: local('MathJax_Main'); font-weight: bold}
@font-face {font-family: MJXc-TeX-main-Bw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Main-Bold.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Main-Bold.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Main-Bold.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-main-I; src: local('MathJax_Main Italic'), local('MathJax_Main-Italic')}
@font-face {font-family: MJXc-TeX-main-Ix; src: local('MathJax_Main'); font-style: italic}
@font-face {font-family: MJXc-TeX-main-Iw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Main-Italic.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Main-Italic.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Main-Italic.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-main-R; src: local('MathJax_Main'), local('MathJax_Main-Regular')}
@font-face {font-family: MJXc-TeX-main-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-math-I; src: local('MathJax_Math Italic'), local('MathJax_Math-Italic')}
@font-face {font-family: MJXc-TeX-math-Ix; src: local('MathJax_Math'); font-style: italic}
@font-face {font-family: MJXc-TeX-math-Iw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-size1-R; src: local('MathJax_Size1'), local('MathJax_Size1-Regular')}
@font-face {font-family: MJXc-TeX-size1-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Size1-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Size1-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Size1-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-size2-R; src: local('MathJax_Size2'), local('MathJax_Size2-Regular')}
@font-face {font-family: MJXc-TeX-size2-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Size2-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Size2-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Size2-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-size3-R; src: local('MathJax_Size3'), local('MathJax_Size3-Regular')}
@font-face {font-family: MJXc-TeX-size3-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Size3-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Size3-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Size3-Regular.otf') format('opentype')}
@font-face {font-family: MJXc-TeX-size4-R; src: local('MathJax_Size4'), local('MathJax_Size4-Regular')}
@font-face {font-family: MJXc-TeX-size4-Rw; src /*1*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/eot/MathJax_Size4-Regular.eot'); src /*2*/: url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/woff/MathJax_Size4-Regular.woff') format('woff'), url('https://cdn.mathjax.org/mathjax/2.6-latest/fonts/HTML-CSS/TeX/otf/MathJax_Size4-Regular.otf') format('opentype')}
</style>
